<!DOCTYPE html>


  <html class="dark page-post">


<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>HTML5+CSS3整体回顾 | Poetry&#39;s Blog</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="HTML5,CSS3,">
  

  <meta name="description" content="转载请声明 原文链接  这篇文章主要总结H5的一些新增的功能以及一些基础归纳，这里只是一个提纲，并不是很详细，后面会一直完善补充新的内容，本文是一些笔记记录，放在这里供自己参考也供他人学习！">
<meta name="keywords" content="HTML5,CSS3">
<meta property="og:type" content="article">
<meta property="og:title" content="HTML5+CSS3整体回顾">
<meta property="og:url" content="http://blog.poetries.top/2016/10/19/HTML5+CSS3基础回顾 /index.html">
<meta property="og:site_name" content="Poetry&#39;s Blog">
<meta property="og:description" content="转载请声明 原文链接  这篇文章主要总结H5的一些新增的功能以及一些基础归纳，这里只是一个提纲，并不是很详细，后面会一直完善补充新的内容，本文是一些笔记记录，放在这里供自己参考也供他人学习！">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-63390b75c7b22ea1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-ce00790dcabf9c47.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-4585c0d9a5309443.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-a13888da66c8fc8a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-458752a50858db60.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-2b18ca0ffce0ec14.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-b8990303b1d10379.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-a7b3e5dca9341862.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-6f30a458860e606f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-dd4078736467f182.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-5c90a330f791f359.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-556426384ddcc4ce.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-33def0f200fe738a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-f9339ed4dcc201aa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-320bad065d62c499.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-693242e2f03506f8.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-885b1d526653b87d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-e966854f01e64406.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-b6daa34d69905a1d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-f8a2291a249961ad.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-aec985a8f543f52e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:updated_time" content="2020-08-15T04:25:31.898Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="HTML5+CSS3整体回顾">
<meta name="twitter:description" content="转载请声明 原文链接  这篇文章主要总结H5的一些新增的功能以及一些基础归纳，这里只是一个提纲，并不是很详细，后面会一直完善补充新的内容，本文是一些笔记记录，放在这里供自己参考也供他人学习！">
<meta name="twitter:image" content="http://upload-images.jianshu.io/upload_images/1480597-63390b75c7b22ea1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">

  

  
    <link rel="icon" href="/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbeddx" rel="stylesheet">
<link href="/css/other.css?v=c114cbeddx" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/personal-style.css">
  

  

  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?40b1f89aa80f2527b3db779c6898c879";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
  

  <!-- 聊天系统 -->
  
    
   <link type="text/css" rel="stylesheet" href="/renxi/default.css">
   <style>
      #modal {
        position: static !important;
      }
      .filter {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fe5757;
        animation: colorChange 30s ease-in-out infinite;
        animation-fill-mode: both;
        mix-blend-mode: overlay;
      }
  
      @keyframes colorChange {
        0%, 100% {
            opacity: 0;
        }
        50% {
            opacity: .9;
        }
      }
   </style>
</head>
</html>
<body>
  
  
    <span id="toolbox-mobile" class="toolbox-mobile">导航</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">导航</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/categories/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tags/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/search/"
            rel="noopener noreferrer"
            target="_self"
            >
            搜索
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/link/"
            rel="noopener noreferrer"
            target="_self"
            >
            友链
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录<i class="iconfont toc-title" style="display:inline-block;color:#87998d;width:20px;height:20px;">&#xf004b;</i></strong>
    <ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#第一课-HTML5结构"><span class="toc-text">第一课 HTML5结构</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#常用的一些新的结构标签"><span class="toc-text">常用的一些新的结构标签</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#删除的HTML标签"><span class="toc-text">删除的HTML标签</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第二课-HTML5智能表单"><span class="toc-text">第二课 HTML5智能表单</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#HTML4-01-form表单复习"><span class="toc-text">HTML4.01 form表单复习</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#HTML5智能表单"><span class="toc-text">HTML5智能表单</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#Input-类型-Date-Pickers（日期选择器）"><span class="toc-text">Input 类型 - Date Pickers（日期选择器）</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#HTML5新增表单属性"><span class="toc-text">HTML5新增表单属性</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#表单验证"><span class="toc-text">表单验证</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第三课-css3选择器"><span class="toc-text">第三课 css3选择器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第四课-CSS3新增文本属性"><span class="toc-text">第四课 CSS3新增文本属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第五课-CSS3盒模型"><span class="toc-text">第五课 CSS3盒模型</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第六课-css3新增背景属性"><span class="toc-text">第六课 css3新增背景属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第七课-css3新增颜色属性"><span class="toc-text">第七课 css3新增颜色属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第八课-CSS3边框系列"><span class="toc-text">第八课 CSS3边框系列</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#圆角-阴影"><span class="toc-text">圆角-阴影</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#边框系列-图片"><span class="toc-text">边框系列-图片</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第九课-CSS3运动体系"><span class="toc-text">第九课 CSS3运动体系</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#过渡"><span class="toc-text">过渡</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#动画"><span class="toc-text">动画</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第十课-transform-2D转换"><span class="toc-text">第十课 transform 2D转换</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第十一课-transform-3D转换"><span class="toc-text">第十一课 transform 3D转换</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第十二课-视频音频"><span class="toc-text">第十二课 视频音频</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#Video的使用"><span class="toc-text">Video的使用</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第十三课-canvas"><span class="toc-text">第十三课 canvas</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第十四课-SVG绘图"><span class="toc-text">第十四课 SVG绘图</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第十五课-地理信息与本地存储"><span class="toc-text">第十五课 地理信息与本地存储</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#地理位置"><span class="toc-text">地理位置</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#本地存储"><span class="toc-text">本地存储</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第十六课-HTML5新增JS方法"><span class="toc-text">第十六课 HTML5新增JS方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第十七课-HTML5拖拽事件"><span class="toc-text">第十七课 HTML5拖拽事件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第十八课-跨文档操作"><span class="toc-text">第十八课 跨文档操作</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#附录一-css3响应式布局"><span class="toc-text">附录一　css3响应式布局</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#附录二-HTML5速查表"><span class="toc-text">附录二　HTML5速查表</span></a></li></ol></li></ol></li></ol>
  </div>
  




<div class="content content-post CENTER">
   <!-- canvas 彩带 -->
<canvas id="evanyou" width="1302" height="678" style="position: fixed;width: 100%;height: 100%;top: 0;left:0;z-index:-1;"></canvas>

<article id="post-HTML5+CSS3基础回顾 " class="article article-type-post" itemprop="blogPost">
  <header class="article-header" style="position:relative;">
    <h1 class="post-title">HTML5+CSS3整体回顾</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2016.10.19</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>Poetry</span>
        </span>
      

      
  <span class="article-category">
    <i class="icon-list"></i>
    <a class="article-category-link" href="/categories/Front-End/">Front-End</a>
  </span>



      

      
      <i class="fa fa-eye"></i> 
        <span id="busuanzi_container_page_pv">
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      
      
       
          <span class="post-count">
            <i class="fa fa-file-word-o"></i>&nbsp
            <span>字数统计 11k字</span>
          </span>

          <span class="post-count">
            <i class="fa fa-columns"></i>&nbsp
            <span>阅读时长 46分</span>
          </span>
      
      
    </div>

    <i class="iconfont" id="toc-eye" style="display:inline-block;color:#b36619;position:absolute;top:0;right:0;cursor:pointer;
    font-size: 24px;">&#xe61c;</i>

  </header>

  <div class="article-content">
    
      <div id="container">
        <blockquote>
<p>转载请声明 <a href="http://blog.poetries.top/2016/10/19/HTML5+CSS3%E5%9F%BA%E7%A1%80%E5%9B%9E%E9%A1%BE%20/">原文链接</a></p>
</blockquote>
<p>这篇文章主要总结H5的一些新增的功能以及一些基础归纳，这里只是一个提纲，并不是很详细，后面会一直完善补充新的内容，本文是一些笔记记录，放在这里供自己参考也供他人学习！<br><a id="more"></a></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-63390b75c7b22ea1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="HTML5概览"></p>
<h4 id="第一课-HTML5结构"><a href="#第一课-HTML5结构" class="headerlink" title="第一课 HTML5结构"></a>第一课 HTML5结构</h4><hr>
<ul>
<li><code>HTML5</code> 是新一代的 <code>HTML</code></li>
<li><code>DTD</code>声明改变    <code>&lt;!DOCTYPE html&gt;</code><ul>
<li>新的结构标签            </li>
</ul>
</li>
</ul>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-ce00790dcabf9c47.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="一些总结--from-dunitian"></p>
<h5 id="常用的一些新的结构标签"><a href="#常用的一些新的结构标签" class="headerlink" title="常用的一些新的结构标签"></a>常用的一些新的结构标签</h5><hr>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-4585c0d9a5309443.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="结构标签"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-a13888da66c8fc8a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="多媒体交互标签"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-458752a50858db60.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="特殊样式标签"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-2b18ca0ffce0ec14.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="兼容性不是很好的标签"></p>
<ul>
<li>补充说明<ul>
<li><code>small</code> 这个元素表示边栏评论，如附属细则</li>
<li><code>cite</code>这个元素可用于显示作品标题（图书、电影、诗歌等）</li>
<li><code>adress</code>这个元素显示<code>article</code>或整个文档的合同信息，且位于<code>footer</code>这个元素之中</li>
<li><code>time</code>显示人和机器可读的日期和时间，而且机器可读的时间戳是属性<code>datetime</code>的值第二个可选的是<code>pubtime</code>用于表示出版日期值</li>
</ul>
</li>
</ul>
<h5 id="删除的HTML标签"><a href="#删除的HTML标签" class="headerlink" title="删除的HTML标签"></a>删除的<code>HTML</code>标签</h5><hr>
<ul>
<li>纯表现的元素：<ul>
<li><code>basefont</code></li>
<li><code>big</code></li>
<li><code>center</code></li>
<li><code>font</code></li>
<li><code>s</code></li>
<li><code>strike</code></li>
<li><code>tt</code></li>
<li><code>u</code></li>
</ul>
</li>
<li>对可用性产生负面影响的元素：<ul>
<li><code>frame</code></li>
<li><code>frameset</code></li>
<li><code>noframes</code><ul>
<li>产生混淆的元素：</li>
</ul>
</li>
<li><code>acronym</code></li>
<li><code>applet</code></li>
<li><code>isindex</code></li>
<li><code>dir</code></li>
</ul>
</li>
<li><p><strong>重新定义的<code>HTML</code>标签</strong></p>
<ul>
<li><code>&lt;b&gt;</code>  代表内联文本，通常是粗体，没有传递表示重要的意思</li>
<li><code>&lt;i&gt;</code> 代表内联文本，通常是斜体，没有传递表示重要的意思</li>
<li><code>&lt;dd&gt;</code> 可以同<code>details</code>与<code>figure</code>一同使用，定义包含文本，<code>ialog</code>也可用</li>
<li><code>&lt;dt&gt;</code> 可以同<code>details</code>与<code>figure</code>一同使用，汇总细节，<code>dialog</code>也可用</li>
<li><code>&lt;hr&gt;</code>表示主题结束，而不是水平线，虽然显示相同</li>
<li><code>&lt;menu&gt;</code> 重新定义用户界面的菜单，配合<code>commond</code>或者<code>menuitem</code>使用</li>
<li><code>&lt;small&gt;</code> 表示小字体，例如打印注释或者法律条款</li>
<li><code>&lt;strong&gt;</code> 表示重要性而不是强调符号</li>
</ul>
</li>
<li><p>崭新新的页面布局</p>
</li>
</ul>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-b8990303b1d10379.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="传统的布局"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-a7b3e5dca9341862.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="HTML5标签布局"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-6f30a458860e606f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="实例-from-dunitian"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-dd4078736467f182.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="草图--from-dunitian"></p>
<h4 id="第二课-HTML5智能表单"><a href="#第二课-HTML5智能表单" class="headerlink" title="第二课 HTML5智能表单"></a>第二课 HTML5智能表单</h4><hr>
<h5 id="HTML4-01-form表单复习"><a href="#HTML4-01-form表单复习" class="headerlink" title="HTML4.01 form表单复习"></a>HTML4.01 form表单复习</h5><hr>
<ul>
<li><code>input</code>表单<code>type</code>属性值<ul>
<li><code>type=&quot;text&quot;</code>          单行文本输入框</li>
<li><code>type=&quot;password&quot;</code>  密码（<code>maxlength=&quot;&quot;</code>）</li>
<li><code>type=&quot;radio&quot;</code>       单项选择（<code>checked=&quot;checked&quot;</code>）</li>
<li><code>type=&quot;checkbox&quot;</code>  多项选择</li>
<li><code>type=&quot;button&quot;</code>     按钮</li>
<li><code>type=&quot;submit&quot;</code>         提交</li>
<li><code>type=&quot;file&quot;</code>           上传文件</li>
<li><code>type=&quot;reset&quot;</code>    重置</li>
</ul>
</li>
</ul>
<h5 id="HTML5智能表单"><a href="#HTML5智能表单" class="headerlink" title="HTML5智能表单"></a>HTML5智能表单</h5><hr>
<ul>
<li><code>input</code>表单<code>type</code>属性值：<ul>
<li><code>type = &quot;email&quot;</code> 限制用户输入必须为<code>Email</code>类型</li>
<li><code>type=&quot;url&quot;</code>          限制用户输入必须为<code>URL</code>类型</li>
<li><code>type=&quot;date&quot;</code>     限制用户输入必须为日期类型</li>
<li><code>type=&quot;datetime&quot;</code> 显示完整日期 含时区</li>
<li><code>type=&quot;datetime-local&quot;</code> 显示完整日期 不含时区</li>
<li><code>type=&quot;time&quot;</code>    限制用户输入必须为时间类型</li>
<li><code>type=&quot;month&quot;</code>  限制用户输入必须为月类型</li>
<li><code>type=&quot;week&quot;</code>    限制用户输入必须为周类型</li>
<li><code>type=&quot;number&quot;</code> 限制用户输入必须为数字类型</li>
<li><code>type=&quot;range&quot;</code>    生成一个滑动条</li>
<li><code>type=&quot;search&quot;</code>  具有搜索意义的表单<code>results=&quot;n&quot;</code>属性</li>
<li><code>type=&quot;color&quot;</code>    生成一个颜色选择表单</li>
<li><code>type=&quot;tel&quot;</code>    显示电话号码</li>
</ul>
</li>
</ul>
<h5 id="Input-类型-Date-Pickers（日期选择器）"><a href="#Input-类型-Date-Pickers（日期选择器）" class="headerlink" title="Input 类型 - Date Pickers（日期选择器）"></a>Input 类型 - Date Pickers（日期选择器）</h5><hr>
<ul>
<li>**<code>HTML5</code> 拥有多个可供选取日期和时间的新输入类型：</li>
<li><code>date</code> 选取日、月、年</li>
<li><code>month</code> 选取月、年</li>
<li><code>week</code>  选取周和年</li>
<li><p><code>time</code>  选取时间（小时和分钟）</p>
</li>
<li><p>以下两个没有作用</p>
<ul>
<li><code>datetime</code>  选取时间、日、月、年（UTC 时间）</li>
<li><code>datetime-local</code>  选取时间、日、月、年（本地时间）</li>
</ul>
</li>
</ul>
<h5 id="HTML5新增表单属性"><a href="#HTML5新增表单属性" class="headerlink" title="HTML5新增表单属性"></a>HTML5新增表单属性</h5><hr>
<ul>
<li><code>required:</code> <code>required</code>内容不能为空</li>
<li><code>placeholder:</code> 表单提示信息</li>
<li><code>autofocus:</code>自动聚焦</li>
<li><code>pattern:</code> 正则表达式  输入的内容必须匹配到指定正则范围</li>
<li><code>autocomplete:</code>是否保存用户输入值<ul>
<li>默认为<code>on</code>，关闭提示选择<code>off</code></li>
</ul>
</li>
<li><code>formaction:</code> 在<code>submit</code>里定义提交地址</li>
<li><code>datalist:</code> 输入框选择列表配合<code>list</code>使用 <code>list</code>值为<code>datalist</code>的<code>id</code>值</li>
<li><code>output:</code> 计算或脚本输出</li>
</ul>
<h5 id="表单验证"><a href="#表单验证" class="headerlink" title="表单验证"></a>表单验证</h5><hr>
<ul>
<li><p><code>validity</code>对象，通过下面的<code>valid</code>可以查看验证是否通过，如果八种验证都返回<code>true</code>,一种验证失败返回<code>false</code></p>
<ul>
<li><code>oText.addEventListener(&quot;invalid&quot;,fn1,false)</code></li>
<li><code>ev.preventDefault()</code>: 阻止默认事件</li>
<li><code>valueMissing</code>: 当输入值为空的时候，返回<code>true</code></li>
<li><code>typeMismatch</code>: 控件值与预期不吻合，返回<code>true</code></li>
<li><code>patternMismatch</code>: 输入值不满足<code>pattern</code>正则，返回<code>true</code></li>
<li><code>cusomError</code><ul>
<li><code>setCustomValidity()</code></li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="第三课-css3选择器"><a href="#第三课-css3选择器" class="headerlink" title="第三课 css3选择器"></a>第三课 css3选择器</h4><hr>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-5c90a330f791f359.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="css3属性快速一览"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-556426384ddcc4ce.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="css3属性快速一览"></p>
<ul>
<li><p><code>CSS3</code>发展史简介</p>
<ul>
<li><code>HTML</code>的诞生 20世纪90年代初</li>
<li><code>1996</code>年底，    <code>CSS</code>第一版诞生</li>
<li><code>1998</code>年<code>5</code>月     <code>CSS2</code>正式发布</li>
<li><code>2004</code>年     <code>CSS2.1</code>发布</li>
<li><code>CSS3</code>的发布    <code>2002</code> <code>2003</code>  <code>2004</code> <code>2005</code>  <code>2007</code> <code>2009</code> <code>2010</code></li>
</ul>
</li>
</ul>
<ul>
<li><p><strong>模块化开发</strong></p>
<ul>
<li><code>CSS1</code> 中定义了网页的基本属性：<ul>
<li>字体、颜色、基本选择器等</li>
</ul>
</li>
<li><code>CSS2</code>中在<code>CSS1</code>的基础上添加了高级功能<ul>
<li>浮动和定位、高级选择器等(子选择器、相邻选择器、通用选择器)</li>
</ul>
</li>
<li><code>CSS3</code>遵循的是模块化开发。发布时间并不是一个时间点，而是一个时间段</li>
</ul>
</li>
<li><p><strong><code>CSS</code>选择器复习</strong></p>
<ul>
<li>通用选择器：<code>*</code> 选择到所有的元素</li>
<li>选择子元素：<code>&gt;</code> 选择到元素的直接后代</li>
<li>相邻兄弟选择器：<code>+</code>选择到紧随目标元素后的第一个元素</li>
<li>普通兄弟选择器：<code>~</code>选择到紧随其后的所有兄弟元素</li>
<li>伪元素选择器：<ul>
<li><code>::first-line</code> 匹配文本块的首行</li>
<li><code>::first-letter</code> 选择文本块的首字母</li>
</ul>
</li>
<li>伪类选择器：<ul>
<li><code>:before</code>,<code>:after</code>在元素内容前面、后面添加内容(相当于行内元素)</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><strong>CSS3结构选择器</strong></li>
</ul>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-33def0f200fe738a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="CSS3结构选择器"></p>
<ul>
<li><strong><code>Css3</code> 属性选择器</strong></li>
</ul>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-f9339ed4dcc201aa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="Css3属性选择器"></p>
<ul>
<li><p><strong><code>CSS3</code>伪类选择器</strong></p>
<ul>
<li><p><strong>UI伪类选择器：</strong></p>
<ul>
<li><code>:enabled</code>选择启用状态元素</li>
<li><code>:disabled</code> 选择禁用状态元素</li>
<li><code>:checked</code>选择被选中的<code>input</code>元素（单选按钮或复选框）</li>
<li><code>:default</code> 选择默认元素</li>
<li><code>:valid</code>、<code>invalid</code> 根据输入验证选择有效或无效的<code>input</code>元素</li>
<li><code>:in-range</code>、<code>out-of-range</code>选择指定范围之内或者之外受限的元素</li>
<li><code>:required</code>、<code>optional</code>根据是否允许:<code>required</code>属性选择<code>input</code>元素</li>
</ul>
</li>
<li><p><strong>动态伪类选择器：</strong></p>
<ul>
<li><code>:link</code>选择链接元素</li>
<li><code>:visited</code> 选择用户以访问的元素</li>
<li><code>:hover</code> 鼠标悬停其上的元素</li>
<li><code>:active</code>鼠标点击时触发的事件</li>
<li><code>:focus</code> 当前获取焦点的元素</li>
</ul>
</li>
<li><p><strong>其他伪类选择器</strong>：</p>
<ul>
<li><code>:not(&lt;选择器&gt;)</code>对括号内选择器的选择取反</li>
<li><code>:lang(&lt;目标语言&gt;)</code> 基于<code>lang</code>全局属性的元素</li>
<li><code>:target</code> <code>url</code>片段标识符指向的元素<ul>
<li><code>:empty</code>选择内容为空的元素</li>
</ul>
</li>
<li><code>:selection</code>鼠标光标选择元素内容</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="第四课-CSS3新增文本属性"><a href="#第四课-CSS3新增文本属性" class="headerlink" title="第四课 CSS3新增文本属性"></a>第四课 CSS3新增文本属性</h4><hr>
<ul>
<li><p><strong>CSS文本属性复习</strong></p>
<ul>
<li><p><code>white-space</code>：对象内空格的处理方式</p>
<ul>
<li><p><code>nowrap</code> 控制文本不换行</p>
</li>
<li><p><code>pre</code> 空白会被浏览器保留</p>
</li>
<li><p><code>pre-line</code> 合并空白  保留换行符</p>
</li>
<li><p><code>pre-wrap</code> 保留空白  正常换行</p>
</li>
</ul>
</li>
<li><p><code>direction</code>：文本流的方向</p>
<ul>
<li><code>ltr</code> 文本从左向右</li>
<li><code>rtl</code>  文本从右往左</li>
</ul>
</li>
<li><p><code>unicode-bidi</code>：用于同一个页面里存在从不同方向读进的文本显示。与<code>direction</code>属性一起使用</p>
</li>
</ul>
</li>
<li><p><strong>CSS3新增文本属性</strong></p>
<ul>
<li><code>color:rgba()</code>;</li>
<li><code>text-overflow</code>:是否使用一个省略标记（…）标示对象内文本的溢出</li>
<li><code>text-align</code>:文本的对齐方式</li>
<li><code>text-transform</code>:文字的大小写</li>
<li><code>text-decoration</code>:文本的装饰线，复合属性</li>
<li><code>text-shadow</code>:文本阴影</li>
<li><code>text-fill-color</code>:文字填充颜色</li>
<li><code>text-stroke</code>:复合属性。设置文字的描边</li>
<li><code>tab-size</code>:制表符的长度</li>
<li><code>word-wrap</code>:当前行超过指定容器的边界时是否断开转行</li>
<li><code>word-break</code>:规定自动换行的处理方法</li>
</ul>
</li>
</ul>
<ul>
<li><p><strong><code>text-overflow:</code>是否使用一个省略标记（<code>...</code>）标示对象内文本的溢出</strong></p>
<ul>
<li><code>clip</code>： 默认值 无省略号</li>
<li><code>ellipsis</code>：当对象内文本溢出时显示省略标记（<code>...</code>）。</li>
<li><strong>注意</strong>：该属性需配合<code>over-flow:hidden</code>属性(超出处理)还有 <code>white-space:nowrap</code>(禁止换行)配合使用，否则无法看到效果</li>
</ul>
</li>
<li><p><strong><code>text-align</code>:文本的对齐方式</strong></p>
<ul>
<li><code>css1</code></li>
<li><code>left</code>:默认值 左对齐</li>
<li><code>right</code>:右对齐</li>
<li><code>center</code>:居中</li>
<li><code>justify</code>： 内容两端对齐。</li>
<li><code>css3</code></li>
<li><code>start</code>:开始边界对齐</li>
<li><code>end</code>:结束边界对齐</li>
</ul>
</li>
<li><p><strong><code>text-transform</code></strong>:文字的大小写</p>
<ul>
<li><strong><code>css1</code></strong><ul>
<li><code>none</code>：    默认值 无转换 </li>
<li><code>capitalize</code>：     将每个单词的第一个字母转换成大写 </li>
<li><code>uppercase</code>：    转换成大写 </li>
<li><code>lowercase</code>：    转换成小写</li>
</ul>
</li>
<li><strong><code>css3</code></strong><ul>
<li><code>full-width</code>：    将左右字符设为全角形式。不支持</li>
<li><code>full-size-kana</code>：将所有小假名字符转换为普通假名。不支持<ul>
<li>例如：土耳其语</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p><strong><code>text-decoration</code>:文本的装饰线，复合属性(只火狐支持)</strong></p>
<ul>
<li><code>text-decoration-line</code>：<ul>
<li>指定文本装饰的种类。相当于<code>CSS1</code>时的<code>text-decoration</code>属性</li>
</ul>
</li>
<li><code>text-decoration-style</code> ：<ul>
<li>`指定文本装饰的样式。</li>
</ul>
</li>
<li><code>text-decoration-color</code>：<ul>
<li>`指定文本装饰的颜色。</li>
</ul>
</li>
<li><code>blink</code>： 指定文字的装饰是闪烁。  <code>opera</code>和<code>firefox</code></li>
<li><code>text-decoration</code> : <code>#F00 double overline</code>   <code>CSS3</code>实例</li>
</ul>
</li>
<li><p><strong><code>text-shadow</code>:文本阴影</strong></p>
<ul>
<li>取值：<code>x</code> <code>y</code>   <code>blur</code> <code>color</code>,……<ul>
<li><code>x</code>      横向偏移</li>
<li><code>y</code>       纵向偏移</li>
<li><code>blur</code>     模糊距离(灰度)</li>
<li><code>color</code>    阴影颜色</li>
</ul>
</li>
</ul>
</li>
<li><p><code>text-fill-color</code>:文字填充颜色</p>
</li>
<li><code>text-stroke</code>:复合属性。设置文字的描边<ul>
<li><code>text-stroke-width</code>:文字的描边厚度 </li>
<li><code>text-stroke-color</code>:文字的描边颜色 </li>
</ul>
</li>
<li><code>tab-size</code>:制表符的长度   <ul>
<li>默认值为<code>8</code>(一个<code>tab</code>键的空格字节长度)，在    <code>pre</code>标签之内才会有显示</li>
</ul>
</li>
<li><code>word-wrap</code>:当前行超过指定容器的边界时是否断开转行<ul>
<li><code>normal</code>： 默认值</li>
<li>允许内容顶开或溢出指定的容器边界。 </li>
</ul>
</li>
<li><code>break-word</code>：<ul>
<li>内容将在边界内换行。如果需要，单词内部允许断行</li>
</ul>
</li>
</ul>
<h4 id="第五课-CSS3盒模型"><a href="#第五课-CSS3盒模型" class="headerlink" title="第五课 CSS3盒模型"></a>第五课 CSS3盒模型</h4><hr>
<ul>
<li>CSS盒模型复习</li>
</ul>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-320bad065d62c499.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="标准盒子模型"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-693242e2f03506f8.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="IE盒子模型"></p>
<ul>
<li><p><strong>CSS3弹性盒模型</strong></p>
<ul>
<li><strong>以下6个属性设置在容器上</strong><ul>
<li><code>flex-direction</code></li>
<li><code>flex-wrap</code></li>
<li><code>flex-flow</code></li>
<li><code>justify-content</code></li>
<li><code>align-items</code></li>
<li><code>align-content</code></li>
</ul>
</li>
<li><p><strong>属性详解</strong></p>
<ul>
<li><code>flex-direction: row</code> | <code>row-reverse</code> | <code>column</code> | <code>column-reverse</code>;</li>
<li><code>flex-wrap: nowrap</code> | <code>wrap</code> | <code>wrap-reverse</code>;</li>
<li><code>flex-flow</code>属性是<code>flex-direction</code>属性和<code>flex-wrap</code>属性的简写形式，默认值为<code>row nowrap</code><ul>
<li><code>flex-flow: &lt;flex-direction&gt; || &lt;flex-wrap&gt;</code>;</li>
</ul>
</li>
<li><code>justify-content</code>属性定义了项目在主轴上的对齐方式。<ul>
<li><code>justify-content: flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code>;</li>
</ul>
</li>
<li><code>align-items</code>属性定义项目在交叉轴上如何对齐。<ul>
<li><code>align-items: flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code>;</li>
</ul>
</li>
<li><code>align-content</code>属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。<ul>
<li><code>align-content: flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code> | <code>stretch</code>;</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>以下6个属性设置在项目上</strong></p>
<ul>
<li><code>order</code></li>
<li><code>flex-grow</code></li>
<li><code>flex-shrink</code></li>
<li><code>flex-basis</code></li>
<li><code>flex</code></li>
<li><code>align-self</code></li>
</ul>
</li>
</ul>
</li>
<li><p><strong>属性详解</strong></p>
<ul>
<li><code>order</code>属性定义项目的排列顺序。数值越小，排列越靠前，默认为<code>0</code></li>
<li><code>flex-grow</code>属性定义项目的放大比例，默认为<code>0</code>，即如果存在剩余空间，也不放大。</li>
<li><code>flex-shrink</code>属性定义了项目的缩小比例，默认为<code>1</code>，即如果空间不足，该项目将缩小。</li>
<li><code>flex-basis</code>属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为<code>auto</code>，即项目的本来大小。</li>
<li><code>flex</code>属性是<code>flex-grow</code>, <code>flex-shrink</code> 和 <code>flex-basis</code>的简写，默认值为<code>0 1 auto</code>。后两个属性可选。</li>
<li><code>align-self</code>属性允许单个项目有与其他项目不一样的对齐方式，可覆盖<code>align-items</code>属性。默认值为<code>auto</code>，表示继承父元素的<code>align-items</code>属性，如果没有父元素，则等同于<code>stretch</code>。<ul>
<li><code>align-self: auto</code> | <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code>;</li>
</ul>
</li>
</ul>
</li>
</ul>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-885b1d526653b87d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="flex布局语法篇小结"></p>
<ul>
<li>拓展阅读<ul>
<li><a href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html" target="_blank" rel="noopener">flex布局语法篇</a></li>
<li><a href="http://www.ruanyifeng.com/blog/2015/07/flex-examples.html" target="_blank" rel="noopener">flex布局实例篇</a></li>
</ul>
</li>
</ul>
<h4 id="第六课-css3新增背景属性"><a href="#第六课-css3新增背景属性" class="headerlink" title="第六课 css3新增背景属性"></a>第六课 css3新增背景属性</h4><hr>
<ul>
<li><p><strong>CSS背景属性复习</strong></p>
<ul>
<li><code>background</code>:<ul>
<li><code>background-color</code>:背景颜色</li>
<li><code>background-image</code>:背景图片</li>
<li><code>background-repeat</code>:背景重复</li>
<li><code>background-position</code>:背景定位</li>
<li><code>background-attachment</code>:背景固定(<code>scroll/fixed)</code></li>
</ul>
</li>
</ul>
</li>
<li><p><strong>CSS3新增背景属性</strong></p>
</li>
<li><p><code>background-size</code>  背景尺寸</p>
<ul>
<li><code>background-size:x y</code> 水平 垂直方向的尺寸，像素/百分比/auto/…</li>
<li><code>background-size:100% 100%</code></li>
<li><code>background-size:cover</code> 比例放大</li>
<li><code>background-size:contain</code> 包含（图片不溢出）</li>
</ul>
</li>
<li><p>多背景</p>
<ul>
<li><code>background-image:url(1.jpg),url(2.jpg)</code>;</li>
</ul>
</li>
<li><p><code>background-origin</code> 背景区域定位</p>
<ul>
<li><code>border-box</code>： 从<code>borde</code>r区域开始显示背景。 </li>
<li><code>padding-box</code>： 从<code>padding</code>区域开始显示背景。 </li>
<li><code>content-box</code>： 从<code>content</code>内容区域开始显示背</li>
</ul>
</li>
<li><code>background-clip</code>   背景绘制区域<ul>
<li><code>border-box</code>： 从<code>border</code>区域向外裁剪背景。 </li>
<li><code>padding-box</code>： 从<code>padding</code>区域向外裁剪背景。 </li>
<li><code>content-box</code>： 从<code>content</code>区域向外裁剪背景。 </li>
</ul>
</li>
<li><p><code>text</code>:背景填充文本</p>
<ul>
<li><code>no-clip</code>： 从<code>border</code>区域向外裁剪背景</li>
</ul>
</li>
<li><p><strong>颜色渐变</strong></p>
<ul>
<li><p><strong>线性渐变</strong>：<code>linear-gradient</code>(起点/角度，颜色 位置，…,)</p>
<ul>
<li>起点：<code>left/top/right/bottom/left top......</code>默认<code>top</code></li>
<li>角度：逆时针方向 <code>0-360</code>度</li>
<li>颜色 位置：<code>red 50%</code>, <code>blue 100%</code>(红色从50%渐变到100%为蓝色)</li>
</ul>
<ul>
<li><code>repeating-linear-gradient</code>  线性渐变重复平铺<ul>
<li><code>IE</code>低版本渐变(滤镜)：</li>
<li><code>filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#ffffff&#39;,endColorstr=&#39;#ff0000&#39;,GradientType=&#39;1&#39;);</code></li>
</ul>
</li>
</ul>
</li>
<li><p><strong>径向渐变</strong>：<code>radial-gradient</code>(起点(圆心位置), 形状/半径/大小，颜色1，颜色2)</p>
<ul>
<li>起点：<code>left/top/right/bottom</code>或具体值/百分比</li>
<li>形状：<code>ellipse</code>(椭圆)、<code>circle</code>(正圆)</li>
<li>大小：具体数值或百分比，也可以是关键字（<code>closest-side</code>(最近端), <code>closest-corner</code>最近角), <code>farthest-side</code>(最远端), f<code>arthest-corner</code>(最远角), <code>contain</code>(包含) ,<code>cover</code>(覆盖)）;</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="第七课-css3新增颜色属性"><a href="#第七课-css3新增颜色属性" class="headerlink" title="第七课 css3新增颜色属性"></a>第七课 css3新增颜色属性</h4><hr>
<ul>
<li><p><strong>CSS颜色属性复习</strong></p>
<ul>
<li><code>color name</code>    颜色英文名称命名</li>
<li><code>HEX</code>方式         十六进制方式</li>
<li><code>rgb</code>方式           三原色配色方式</li>
</ul>
</li>
<li><p><strong>CSS3新增颜色属性</strong></p>
<ul>
<li><strong><code>rgba()</code></strong></li>
</ul>
</li>
</ul>
<table>
<thead>
<tr>
<th>名称</th>
<th>颜色</th>
<th>颜色</th>
<th>取值</th>
</tr>
</thead>
<tbody>
<tr>
<td>r</td>
<td>red</td>
<td>红色</td>
<td>0-255</td>
</tr>
<tr>
<td>g</td>
<td>green</td>
<td>绿色</td>
<td>0-255</td>
</tr>
<tr>
<td>b</td>
<td>blue</td>
<td>蓝色</td>
<td>0-255</td>
</tr>
<tr>
<td>a</td>
<td>alpha</td>
<td>透明</td>
<td>0-1</td>
</tr>
</tbody>
</table>
<ul>
<li><p><strong><code>HSL</code>模式  <code>HSLA</code>模式</strong></p>
<ul>
<li><code>H</code>： <code>Hue</code>(色调)。<ul>
<li>0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：<code>0 - 360</code> </li>
</ul>
</li>
<li><code>S</code>：<code>Saturation</code>(饱和度)。取值为：0.0% - 100.0% </li>
<li><code>L</code>： <code>Lightness</code>(亮度)。取值为：0.0% - 100.0%</li>
<li><p><code>A</code>:    <code>alpha</code>   透明度   0~1之间</p>
</li>
<li><p>语法:<code>HSLA(H,S,L,A)</code></p>
</li>
</ul>
</li>
<li><p>HSL色轮</p>
</li>
</ul>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-e966854f01e64406.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="HSL色轮"></p>
<ul>
<li><p>透明颜色：<code>transparent</code></p>
<ul>
<li>实例：<code>border</code>实现三角箭头、风车等</li>
</ul>
</li>
<li><p>透明度：</p>
<ul>
<li><code>opacity</code></li>
<li>取值：<code>0-1</code>之间</li>
<li>注：低版本的<code>IE</code>浏览器不兼容,需用IE浏览器的滤镜实现相同效果，<code>filter:alpha(opacity=50)</code></li>
<li>对于低版本的火狐浏览器需添加内核前缀，<code>-moz-opacity</code></li>
</ul>
</li>
</ul>
<h4 id="第八课-CSS3边框系列"><a href="#第八课-CSS3边框系列" class="headerlink" title="第八课 CSS3边框系列"></a>第八课 CSS3边框系列</h4><hr>
<h5 id="圆角-阴影"><a href="#圆角-阴影" class="headerlink" title="圆角-阴影"></a>圆角-阴影</h5><hr>
<ul>
<li><p>边框圆角</p>
<ul>
<li>在<code>CSS2</code>中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片</li>
<li>在 <code>CSS3</code>中，创建圆角是非常容易的</li>
<li>在<code>CSS3</code>中，<code>border-radius</code>属性用于创建圆角</li>
</ul>
</li>
<li><p><strong><code>border-radius</code>边框圆角写法</strong></p>
<ul>
<li><code>border-radius: 2em 1em 4em / 0.5em 3em;</code></li>
<li>等价于<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">border-top-left-radius</span>: 2<span class="selector-tag">em</span> 0<span class="selector-class">.5em</span>;</span><br><span class="line"><span class="selector-tag">border-top-right-radius</span>: 1<span class="selector-tag">em</span> 3<span class="selector-tag">em</span>;</span><br><span class="line"><span class="selector-tag">border-bottom-right-radius</span>: 4<span class="selector-tag">em</span> 0<span class="selector-class">.5em</span>;</span><br><span class="line"><span class="selector-tag">border-bottom-left-radius</span>: 1<span class="selector-tag">em</span> 3<span class="selector-tag">em</span>;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p><strong><code>box-shadow</code>方框添加阴影</strong></p>
<ul>
<li><p>语法：<code>box-shadow:x-shadow y-shadow blur spread color inset;</code></p>
</li>
<li><p><strong>box-shadow的API</strong></p>
<ul>
<li><code>x-shadow</code> 必需。水平阴影的位置。允许负值。    </li>
<li><code>y-shadow</code>     必需。垂直阴影的位置。允许负值。    </li>
<li><code>blur</code>     可选。模糊距离。    </li>
<li><code>spread</code>     可选。阴影的尺寸。    </li>
<li><code>color</code>     可选。阴影的颜色。请参阅 <code>CSS</code>颜色值    </li>
<li><code>inset</code>     可选。将外部阴影 (<code>outset</code>) 改为内部阴影</li>
</ul>
</li>
<li>实例：<code>box-shadow:10px 10px 5px 5px #888888;</code></li>
</ul>
</li>
</ul>
<h5 id="边框系列-图片"><a href="#边框系列-图片" class="headerlink" title="边框系列-图片"></a>边框系列-图片</h5><hr>
<ul>
<li><strong><code>border-image</code>语法</strong></li>
</ul>
<table>
<thead>
<tr>
<th>属性</th>
<th>版本</th>
<th>简介</th>
</tr>
</thead>
<tbody>
<tr>
<td>border-image</td>
<td>CSS3</td>
<td>设置或检索对象的边框使用图像来填充</td>
</tr>
<tr>
<td>border-image-source</td>
<td>CSS3</td>
<td>设置或检索对象的边框是否用图像定义样式或图像来源路径</td>
</tr>
<tr>
<td>border-image-slice</td>
<td>CSS3</td>
<td>设置或检索对象的边框背景图的分割方式</td>
</tr>
<tr>
<td>border-image-width</td>
<td>CSS3</td>
<td>设置或检索对象的边框厚度</td>
</tr>
<tr>
<td>border-image-outset</td>
<td>CSS3</td>
<td>设置或检索对象的边框背景图的扩展</td>
</tr>
<tr>
<td>border-image-repeat</td>
<td>CSS3</td>
<td>设置或检索对象的边框图像的平铺方式</td>
</tr>
</tbody>
</table>
<ul>
<li><strong><code>border-image-slice</code></strong><ul>
<li>设置或检索对象的边框背景图的分割方式</li>
</ul>
</li>
</ul>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-b6daa34d69905a1d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="Paste_Image.png"></p>
<ul>
<li><strong><code>border-image-repeat</code></strong><ul>
<li>用于指定边框背景图的重复方式</li>
<li>取值：<ul>
<li><code>stretch</code>： 指定用拉伸方式来填充边框背景图。 *默认的</li>
<li><code>repeat</code>： 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。 </li>
<li><code>round</code>： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小    直至正好可以铺满整个边框。写本文档时仅Firefox能看到该效果 </li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="第九课-CSS3运动体系"><a href="#第九课-CSS3运动体系" class="headerlink" title="第九课 CSS3运动体系"></a>第九课 CSS3运动体系</h4><hr>
<h5 id="过渡"><a href="#过渡" class="headerlink" title="过渡"></a>过渡</h5><hr>
<ul>
<li><p>过渡：给改变添加过程</p>
<ul>
<li>什么是过渡</li>
<li>过渡效果由哪几部分组成</li>
<li>过渡可以干些什么</li>
</ul>
</li>
<li><p><code>transition</code> 过渡属性</p>
</li>
<li><p><code>transition: property duration timing-function delay</code>;</p>
<ul>
<li><code>transition-property:</code>过渡属性的名称<ul>
<li><code>none</code>  没有过渡属性</li>
<li><code>all</code>      所有属性都过渡(默认值)</li>
<li><code>property</code>   具体属性名称(<code>property1</code>,<code>property2</code>…)</li>
</ul>
</li>
<li><code>transition-duration:</code>过渡属性花费的时间<ul>
<li><code>time</code>  秒或毫秒</li>
</ul>
</li>
<li><code>transition-timing-function:</code>过渡效果速度曲线<ul>
<li><code>time</code>  秒或毫秒</li>
</ul>
</li>
<li><code>transition-delay:</code>过渡效果延迟时间</li>
</ul>
</li>
<li><p><strong><code>transition-timing-function</code>:过渡效果速度曲线</strong></p>
<ul>
<li><code>linear</code>:规定以相同速度开始至结束的过渡效果（等于 <code>cubic-bezier(0,0,1,1)</code>）。</li>
<li><code>ease</code>:规定慢速开始，然后变快，然后慢速结束的过渡效果（<code>cubic-bezier(0.25,0.1,0.25,1)</code>）。</li>
<li><code>ease-in</code>:规定以慢速开始的过渡效果（等于 <code>cubic-bezier(0.42,0,1,1)</code>）。</li>
<li><code>ease-out</code>    :规定以慢速结束的过渡效果（等于 <code>cubic-bezier(0,0,0.58,1)</code>）。</li>
<li><code>ease-in-out</code> :规定以慢速开始和结束的过渡效果（等于 <code>cubic-bezier(0.42,0,0.58,1)</code>）。</li>
<li><code>cubic-bezier(n,n,n,n)</code>:在 <code>cubic-bezier</code> 函数中定义自己的值。可能的值是 <code>0</code>至 <code>1</code> 之间的数值。</li>
</ul>
</li>
<li><p>过渡完成事件<br><img src="http://upload-images.jianshu.io/upload_images/1480597-f8a2291a249961ad.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="过渡完成事件"></p>
</li>
<li><p><code>Webkit</code>内核： </p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">obj.addEventListener(<span class="string">'webkitTransitionEnd'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;)</span><br></pre></td></tr></table></figure>
</li>
<li><p>标准: </p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">obj.addEventListener(<span class="string">'transitionend'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;)</span><br></pre></td></tr></table></figure>
<h5 id="动画"><a href="#动画" class="headerlink" title="动画"></a>动画</h5><hr>
<ul>
<li><p>什么是<code>CSS3</code> 动画？</p>
<ul>
<li>通过 <code>CSS3</code>，我们能够创建动画，这可以在许多网页中取代动画图片、<code>Flash</code> 动画以及 <code>JavaScript</code></li>
</ul>
</li>
<li><p><strong>动画接口</strong></p>
</li>
</ul>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>@keyframes</td>
<td>规定动画。</td>
</tr>
<tr>
<td>animation</td>
<td>所有动画属性的简写属性，除了 animation-play-state 属性。</td>
</tr>
<tr>
<td>animation-name</td>
<td>规定 @keyframes 动画的名称。</td>
</tr>
<tr>
<td>animation-duration</td>
<td>规定动画完成一个周期所花费的秒或毫秒。</td>
</tr>
<tr>
<td>animation-timing-function</td>
<td>规定动画的速度曲线。</td>
</tr>
<tr>
<td>animation-delay</td>
<td>规定动画何时开始。</td>
</tr>
<tr>
<td>animation-iteration-count</td>
<td>规定动画被播放的次数。</td>
</tr>
<tr>
<td>animation-direction</td>
<td>规定动画是否在下一周期逆向地播放。</td>
</tr>
<tr>
<td>animation-play-state</td>
<td>规定动画是否正在运行或暂停。</td>
</tr>
<tr>
<td>animation-fill-mode</td>
<td>规定对象动画时间之外的状态。</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>animation-timing-function速度曲线</strong></li>
</ul>
<table>
<thead>
<tr>
<th>值</th>
<th>描述 </th>
</tr>
</thead>
<tbody>
<tr>
<td>linear</td>
<td>动画从头到尾的速度是相同的。</td>
</tr>
<tr>
<td>ease</td>
<td>默认。动画以低速开始，然后加快，在结束前变慢。</td>
</tr>
<tr>
<td>ease-in</td>
<td>动画以低速开始。</td>
</tr>
<tr>
<td>ease-out</td>
<td>动画以低速结束。</td>
</tr>
<tr>
<td>ease-in-out</td>
<td>动画以低速开始和结束。</td>
</tr>
<tr>
<td>cubic-bezier(n,n,n,n)</td>
<td>在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。</td>
</tr>
</tbody>
</table>
<ul>
<li><p>在谷歌浏览器里面需要加上<code>-webkit-</code><br><code>IE6,7,8,9</code>不支持<code>css3</code>运动</p>
</li>
<li><p>拓展阅读</p>
<ul>
<li><a href="http://note.youdao.com/noteshare?id=c4f5a977a7b3aa256a3c28aa64d6f989" target="_blank" rel="noopener">CSS3动画简介</a></li>
</ul>
</li>
</ul>
<ul>
<li><p><strong>CSS3盒模型阴影</strong></p>
<ul>
<li><code>box-shadow:inset x y blur spread color</code></li>
<li><code>inset</code>：投影方式</li>
<li><code>inset</code>：内投影</li>
<li><code>outset</code>：外投影 默认(不能设置)</li>
<li><code>x</code>、<code>y</code>：阴影偏移</li>
<li><code>blur</code>：模糊半径（灰度）</li>
<li><code>spread</code>：扩展阴影半径</li>
<li>先扩展原有形状，再开始画阴影</li>
<li><code>color</code></li>
</ul>
</li>
<li><p><strong><code>CSS3</code>盒模型倒影</strong></p>
</li>
<li><p><code>box-reflect</code> 倒影</p>
<ul>
<li>方向 <code>above|below|left|right;</code></li>
<li>距离</li>
<li>渐变（可选）</li>
</ul>
</li>
<li><p><strong>CSS3其他盒模型</strong></p>
<ul>
<li><code>box-sizing</code> 盒模型解析模式</li>
<li><code>content-box</code>  标准盒模型(和<code>css2</code>一样的计算)</li>
<li><code>width/height=border+padding+content</code></li>
<li><code>border-box</code> 怪异盒模型<code>width/height</code>与设置的值一样 ，<code>content</code>减小</li>
</ul>
</li>
<li><p>扩展阅读</p>
<ul>
<li><a href="http://www.jianshu.com/p/e2eb0d8c9de6" target="_blank" rel="noopener">学会使用css3的box-sizing布局</a></li>
</ul>
</li>
</ul>
<h4 id="第十课-transform-2D转换"><a href="#第十课-transform-2D转换" class="headerlink" title="第十课 transform 2D转换"></a>第十课 transform 2D转换</h4><hr>
<ul>
<li><strong><code>Css3</code>平面转换方法</strong><ul>
<li><code>translate()</code>        移动</li>
<li><code>rotate()</code>        旋转</li>
<li><code>scale()</code>        缩放</li>
<li><code>skew()</code>        翻转</li>
<li><code>matrix()</code>    矩阵</li>
</ul>
</li>
</ul>
<ul>
<li><strong>transform</strong>:<ul>
<li><code>rotate()</code>  旋转函数 (deg)<ul>
<li><code>deg</code>  度数</li>
</ul>
</li>
<li><code>skew(X,Y)</code> 倾斜函数 (deg) <ul>
<li><code>skewX()</code></li>
<li><code>skewY()</code></li>
</ul>
</li>
<li><code>scale(X,Y)</code> 缩放函数 (正数、负数和小数)<ul>
<li><code>scaleX()</code></li>
<li><code>scaleY()</code></li>
</ul>
</li>
<li><code>translate(X,Y)</code> 位移函数(px)<ul>
<li><code>translateX()</code></li>
<li><code>translateY()</code></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><p><strong><code>rotate()</code> 旋转方法</strong></p>
<ul>
<li>用于旋转元素角度</li>
<li>例：<code>rotate(30deg)</code><ul>
<li>把元素顺时针旋转 30 度</li>
</ul>
</li>
</ul>
</li>
<li><p><strong><code>translate()</code>位置方法</strong></p>
<ul>
<li>用于移动元素位置<ul>
<li>例：<code>translate(50px,100px)</code><ul>
<li>把元素从左侧移动 50 像素，从顶端移动 100 像素。</li>
</ul>
</li>
</ul>
</li>
<li>其实有些类似于我们的相对定位</li>
</ul>
</li>
<li><p><strong><code>scale()</code>尺寸方法</strong></p>
<ul>
<li>方法用于改变元素尺寸<ul>
<li>例：<code>scale(2,4)</code> <ul>
<li>把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p><strong><code>skew()</code> 翻转方法</strong></p>
<ul>
<li>通过 <code>skew()</code>方法，元素翻转给定的角度<ul>
<li>例：<code>transform: skew(30deg,20deg);</code><ul>
<li>把元素围绕 <code>X</code>轴把元素翻转<code>30</code> 度，围绕 <code>Y</code> 轴翻转 <code>20</code>度</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="第十一课-transform-3D转换"><a href="#第十一课-transform-3D转换" class="headerlink" title="第十一课 transform 3D转换"></a>第十一课 transform 3D转换</h4><hr>
<ul>
<li><p><strong><code>Css3</code>立体转换</strong></p>
<ul>
<li><code>transform-style（preserve-3d）</code> 建立<code>3D</code>空间（指定元素的子元素展示的场景是在3D场景还是平面(投影)场景）</li>
<li><code>Perspective</code> 视角（指定观察者与z=0平面的距离，从而让元素及子元素看起来有3D透视位置效果<br>值：集体的带单位数值）</li>
<li><code>Perspective- origin</code> 视角基点<ul>
<li>值：取值类似于变换基准</li>
</ul>
</li>
<li><code>transform-origin</code>：坐标轴基点（变换基准）<ul>
<li>值：具体的坐标值/百分比/(<code>left</code>/<code>right</code>/<code>center</code>/<code>top</code>/<code>bottom</code>)<br>默认 <code>center center</code></li>
</ul>
</li>
</ul>
</li>
<li><p><strong>transform 新增函数</strong></p>
<ul>
<li><code>rotateX()</code></li>
<li><code>rotateY()</code></li>
<li><code>rotateZ()</code></li>
<li><code>translateZ()</code></li>
<li><code>scaleZ()</code></li>
</ul>
</li>
</ul>
<h4 id="第十二课-视频音频"><a href="#第十二课-视频音频" class="headerlink" title="第十二课 视频音频"></a>第十二课 视频音频</h4><hr>
<ul>
<li><p>视频音频格式的简单介绍</p>
<ul>
<li>常见的视频格式<ul>
<li>视频的组成部分：画面、音频、编码格式</li>
<li>视频编码：H.264、Theora、VP8(google开源)</li>
</ul>
</li>
<li>常见的音频格式<ul>
<li>视频编码：ACC、MP3、Vorbis</li>
</ul>
</li>
</ul>
</li>
<li><p><strong><code>HTML5</code>支持的格式</strong></p>
</li>
</ul>
<hr>
<ul>
<li><code>HTML5</code>能在完全脱离插件的情况下播放音视频,但是不是所有格式都支持。</li>
<li><strong>支持的视频格式：</strong><ul>
<li><code>Ogg=</code>带有<code>Theora</code>视频编码<code>+Vorbis</code>音频编码的<code>Ogg</code>文件</li>
<li><code>MEPG4=</code>带有H.264视频编码<code>+AAC</code>音频编码的<code>MPEG4</code>文件</li>
<li><code>WebM=</code>带有<code>VP8</code>视频编码<code>+Vorbis</code>音频编码的<code>WebM</code>格式</li>
</ul>
</li>
</ul>
<h5 id="Video的使用"><a href="#Video的使用" class="headerlink" title="Video的使用"></a><code>Video</code>的使用</h5><hr>
<ul>
<li><strong>单独用法</strong><ul>
<li><code>&lt;video src=&quot;文件地址&quot; controls=&quot;controls&quot;&gt;&lt;/video&gt;</code></li>
</ul>
</li>
<li><strong>带提示用法</strong></li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt; <span class="attr">video</span> <span class="attr">src</span>=<span class="string">"文件地址"</span> <span class="attr">controls</span>=<span class="string">"controls"</span>&gt;</span></span><br><span class="line">	您的浏览器暂不支持video标签。播放视频</span><br><span class="line"><span class="tag">&lt;/ <span class="attr">video</span> &gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li><strong>兼容用法</strong></li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt; <span class="attr">video</span>  <span class="attr">controls</span>=<span class="string">"controls"</span>  <span class="attr">width</span>=<span class="string">"300"</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">"move.ogg"</span> <span class="attr">type</span>=<span class="string">"video/ogg"</span> &gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">"move.mp4"</span> <span class="attr">type</span>=<span class="string">"video/mp4"</span> &gt;</span></span><br><span class="line">	您的浏览器暂不支持video标签。播放视频</span><br><span class="line"><span class="tag">&lt;/ <span class="attr">video</span> &gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li><strong><code>Video</code>的常见属性</strong></li>
</ul>
<table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>Autoplay</td>
<td>Autoplay</td>
<td>视频就绪自动播放</td>
</tr>
<tr>
<td>controls</td>
<td>controls</td>
<td>向用户显示播放控件</td>
</tr>
<tr>
<td>Width</td>
<td>Pixels(像素)</td>
<td>设置播放器宽度</td>
</tr>
<tr>
<td>Height</td>
<td>Pixels(像素)</td>
<td>设置播放器高度</td>
</tr>
<tr>
<td>Loop</td>
<td>Loop</td>
<td>播放完是否继续播放该视频，循环播放</td>
</tr>
<tr>
<td>Preload</td>
<td>load{auto,meta,none}</td>
<td>规定是否预加载视频。</td>
</tr>
<tr>
<td>Src</td>
<td>url</td>
<td>视频url地址</td>
</tr>
<tr>
<td>Poster</td>
<td>Imgurl</td>
<td>加载等待的画面图片</td>
</tr>
<tr>
<td>Autobuffer</td>
<td>Autobuffer</td>
<td>设置为浏览器缓冲方式，不设置autoply才有效</td>
</tr>
</tbody>
</table>
<ul>
<li><strong><code>Video</code>的<code>API</code>方法</strong></li>
</ul>
<table>
<thead>
<tr>
<th>方法</th>
<th>属性</th>
<th>事件</th>
</tr>
</thead>
<tbody>
<tr>
<td>play()</td>
<td>currentSrc</td>
<td>play</td>
</tr>
<tr>
<td>pause()</td>
<td>currentTime</td>
<td>pause</td>
</tr>
<tr>
<td>load()</td>
<td>videoWidth</td>
<td>progress</td>
</tr>
<tr>
<td>canPlayType()</td>
<td>videoHeight</td>
<td>error</td>
</tr>
</tbody>
</table>
<h4 id="第十三课-canvas"><a href="#第十三课-canvas" class="headerlink" title="第十三课 canvas"></a>第十三课 canvas</h4><hr>
<ul>
<li>标签 <code>&lt;canvas&gt;</code><ul>
<li>不支持<code>canvas</code> 的浏览器可以看到的内容</li>
<li>默认宽度<code>300px</code>，默认高度<code>150px</code></li>
<li>注意：<code>canvas</code>宽高需要设置在标签中 否则绘制的东西可能出错</li>
</ul>
</li>
<li><code>&lt;canvas&gt;</code> 绘制环境<ul>
<li><code>getContext(&quot;2d&quot;)</code>;目前支持<code>2d</code>的场景</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">canvas</span> <span class="attr">width</span>=<span class="string">""</span> <span class="attr">height</span>=<span class="string">""</span> <span class="attr">id</span>=<span class="string">""</span>&gt;</span></span><br><span class="line">	您的浏览器不支持canvas，请更换浏览器！</span><br><span class="line"><span class="tag">&lt;/<span class="name">canvas</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li><p><strong>绘制矩形</strong></p>
<ul>
<li><code>rect(L,T,W,H)</code>:创建一个矩形</li>
<li><code>fillRect(L,T,W,H)</code>:绘制填充的矩形</li>
<li><code>clearRect(x,y,w,h)</code> 清除矩形选区</li>
<li><code>strokeRect(L,T,W,H)</code>绘制空心矩形(无填充)<ul>
<li>默认一像素黑色边框</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>设置绘图样式</strong></p>
<ul>
<li><code>fillStyle</code>:填充颜色(绘制<code>canvas</code>是有顺序的)</li>
<li><code>lineWidth</code>:触笔宽度(线宽)</li>
<li><code>strokeStyle</code>:触笔颜色</li>
</ul>
</li>
<li><strong>绘制路径</strong><ul>
<li><code>beginPath()</code> :开始路径</li>
<li><code>closePath():</code>结束路径</li>
<li><code>moveTo(x,y)</code>:将触笔移动到x,y点</li>
<li><code>lineTo(x,y)</code>:绘制到x,y点</li>
<li><code>stroke():</code> 触笔方法 画线  默认为黑色</li>
<li><code>fill()</code>:填充方法 </li>
<li><code>rect(x,y,w,h)</code>:矩形路径</li>
<li><code>save()</code>:保存路径</li>
<li><code>restore()</code>:恢复路径</li>
</ul>
</li>
<li><p><strong>绘制曲线</strong> </p>
<ul>
<li><code>arcTo(x1,y1,x2,y2,r)</code><ul>
<li><code>x1</code>,<code>y1</code> 坐标一  <code>x2</code>,<code>y2</code>坐标二   r圆弧半斤</li>
</ul>
</li>
<li><code>quadraticCurveTo(dx,dy,x1,y1)</code><ul>
<li>贝塞尔曲线:<code>dx</code>,<code>dy</code>控制点  <code>x1</code>,<code>y1</code>结束坐标</li>
</ul>
</li>
<li><code>bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)</code><ul>
<li>贝塞尔曲线:<code>dx1,dy1</code> 控制点一 <code>dx2,dy2</code>控制点二 </li>
<li><code>x1,y1</code>结束坐标</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>绘制圆形</strong></p>
<ul>
<li><code>arc(x,y,半径,起始弧度,结束弧度,旋转方向)</code><ul>
<li><code>x</code>，<code>y</code>起始位置</li>
<li>弧度与角度：<code>弧度=角度值*Math.PI/180</code></li>
<li>旋转方向：顺时针（默认：<code>false</code>），逆时针（<code>true</code>）</li>
</ul>
</li>
</ul>
</li>
<li><strong>绘制文本</strong><ul>
<li><code>strokeText(文本,x,y)</code>;  绘制空心文本</li>
<li><code>fillText(文本,x,y)</code>; 绘制实心文本</li>
<li><code>font = &quot;font-size  font-family&quot;</code>注:尺寸 字体缺一不可<ul>
<li><code>textAlign = &quot;&quot;;</code>文本左右对齐方式  <code>start center end  left right</code></li>
<li><code>textBaseline</code>文本上下对齐方式 <ul>
<li><code>alphabetic</code>默认。文本基线是普通的字母基线。</li>
<li><code>top</code>    文本基线是 <code>em</code> 方框的顶端。。</li>
<li><code>hanging</code>    文本基线是悬挂基线。</li>
<li><code>middle</code>    文本基线是<code>em</code> 方框的正中。</li>
<li><code>ideographic</code>    文本基线是表意基线。</li>
<li><code>bottom</code>    文本基线是 <code>em</code> 方框的底端。</li>
<li><code>measureText(文本).width;</code> 文本实际宽度(只有宽度值)</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><p><strong>图形边界样式</strong></p>
<ul>
<li><code>lineJoin</code>: 边界连接点样式<ul>
<li><code>miter</code>(默认值),<code>round</code>(圆角),<code>bevel</code>(斜角)</li>
</ul>
</li>
<li><code>lineCap</code>: 端点样式<ul>
<li><code>butt</code>(默认值),<code>round</code>(圆角),<code>square</code>(高度多出线宽一半)</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>绘制图片</strong></p>
<ul>
<li><p>图片预加载，获取图片文件</p>
<ul>
<li><code>onload</code>中调用</li>
<li><code>drawImage(img,x,y,w,h);</code>绘制图片(图片,坐标<code>x</code>,坐标<code>y</code>,宽度,高度)</li>
</ul>
</li>
<li><p>设置背景</p>
<ul>
<li><code>createPattern(img,平铺方式)</code></li>
<li>平铺方式:<code>repeat</code>,<code>repeat-x</code>,<code>repeat-y</code>,<code>no-repeat</code></li>
</ul>
</li>
</ul>
</li>
<li><p><strong>canvas变换</strong></p>
<ul>
<li><code>translate(x,y)</code><ul>
<li>坐标基准点偏移 : 从起始点为基准，移动到当前位置</li>
</ul>
</li>
<li><code>rotate(弧度)</code>: 旋转  <code>弧度公式 = 角度*PI/180</code></li>
<li><code>scale(wb,hb)</code>缩放比例(缩放<code>canvas</code>绘制的图片)</li>
</ul>
</li>
<li><p><strong>颜色渐变</strong></p>
<ul>
<li>线性渐变:<code>createLinearGradient(x1,y1,x2,y2)</code><ul>
<li><code>x1</code>,<code>y1</code>起始坐标点</li>
<li><code>x2</code>,<code>y2</code>结束坐标点</li>
</ul>
</li>
<li>径向渐变:<code>createRadialGradient(x1,y1,r1,x2,y2,r2)</code><ul>
<li><code>x1</code>,<code>y1</code>,<code>r1</code>内圆坐标及半径</li>
<li><code>x2</code>,<code>y2</code>,<code>r2</code>外圆坐标及半径</li>
<li><code>addColorStop</code>(位置,颜色)  位置:渐变点  <code>0-1</code>之间 可多个</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>阴影</strong></p>
<ul>
<li><code>shadowOffsetX</code>,<code>shadowOffsetY</code>    <code>x</code>轴、<code>y</code>轴偏移</li>
<li><code>shadowBlur</code>    阴影模糊度</li>
<li><code>shadowColor</code>  阴影颜色 默认颜色:<code>rgba(0,0,0,0)</code></li>
</ul>
</li>
<li><p><strong>像素</strong></p>
<ul>
<li><code>createImageData(sx,sy)</code> 创建新的、空白的 <code>ImageData</code> 对象</li>
<li><code>getImageData(x1,y1,sx,sy)</code><ul>
<li>返回<code>ImageData</code>对象，该对象为画布上指定的矩形复制像素数据<code>putImageData(img,x2,y2)</code></li>
<li>把图像数据（从指定的 <code>ImageData</code> 对象）放回画布上</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>合成</strong></p>
<ul>
<li><code>globalAlpha</code>  设置或返回绘图的当前<code>alpha</code>或透明值</li>
<li><code>globalCompositeOperation</code> 设置或返回新图像如何绘制到已有的图像上</li>
<li><code>source-over</code>默认。在目标图像上显示源图像。</li>
<li><code>source-atop</code>在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。</li>
<li><code>source-in</code>    在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。</li>
<li><code>source-out</code>在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。</li>
<li><code>destination-over</code>在源图像上方显示目标图像。</li>
<li><code>destination-atop</code>在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。</li>
<li><code>destination-in</code>在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。</li>
<li><code>destination-out</code>在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。</li>
<li><code>lighter</code>显示源图像 + 目标图像。</li>
<li><code>copy</code>显示源图像。忽略目标图像。</li>
<li><code>xor</code>使用异或操作对源图像与目标图像进行组合。</li>
</ul>
</li>
</ul>
<ul>
<li>扩展阅读<ul>
<li><a href="http://luckykun.com/work/2016-09-01/canvas-study01.html" target="_blank" rel="noopener">canvas学习之API整理笔记（一）</a></li>
<li><a href="http://jartto.wang/2016/07/25/make-an-inventory-of-html5-api/" target="_blank" rel="noopener">HTML5 API大盘点</a></li>
</ul>
</li>
</ul>
<h4 id="第十四课-SVG绘图"><a href="#第十四课-SVG绘图" class="headerlink" title="第十四课 SVG绘图"></a>第十四课 SVG绘图</h4><hr>
<ul>
<li><p><strong>svg是什么</strong></p>
<ul>
<li>矢量图</li>
<li>与<code>canvas</code>的区别</li>
</ul>
</li>
<li><p><strong>svg的引入方式</strong></p>
</li>
<li><p>方式一：</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta">&lt;?xml version="1.1" encoding="utf-8"?&gt;</span></span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">svg</span> </span></span><br><span class="line"><span class="meta">PUBLIC <span class="meta-string">"-//W3C//DTD SVG 1.1//EN"</span>  <span class="meta-string">"http://www.w3.org/</span></span></span><br><span class="line"><span class="meta"><span class="meta-string">Graphics/SVG/1.1/DTD/svg11.dtd"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">svg</span> <span class="attr">xmlns</span>=<span class="string">"http://www.w3.org/2000/svg"</span>&gt;</span><span class="tag">&lt;/<span class="name">svg</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>方式二：</p>
<ul>
<li>图片、背景、框架</li>
</ul>
</li>
<li><p>方式三: </p>
<ul>
<li><code>html</code>页面中添加<code>svg</code></li>
</ul>
</li>
<li><p><strong><code>circle</code>:圆形</strong></p>
<ul>
<li>圆心坐标  <code>cx</code>,<code>cy</code></li>
<li>半径  <code>r</code></li>
<li><code>fill</code>   <code>stroke</code>  <code>stroke-width</code>     <code>stlye</code>样式 </li>
<li><code>fill = &quot;none/transparent&quot;</code></li>
</ul>
</li>
<li><strong>ellipse:椭圆</strong><ul>
<li><code>cx</code>属性定义的椭圆中心的x坐标</li>
<li><code>cy</code>属性定义的椭圆中心的y坐标</li>
<li><code>rx</code>属性定义的水平半径</li>
<li><code>ry</code>属性定义的垂直半径</li>
</ul>
</li>
<li><strong>rect : 矩形</strong><ul>
<li><code>width</code>  <code>height</code> 宽高   </li>
<li>坐标 <code>x</code>,<code>y</code> </li>
<li>圆角  <code>rx</code>,<code>ry</code></li>
</ul>
</li>
<li><p><strong><code>line</code>:线条</strong></p>
<ul>
<li><code>x1</code>,<code>y1</code>,<code>x2</code>,<code>y2</code></li>
<li><code>stroke-opacity</code>  透明  <code>fill-opacity</code></li>
</ul>
</li>
<li><p><strong>polyline:折线</strong></p>
<ul>
<li><code>points</code>:点坐标（<code>x1 y1 x2 y2...</code>）或(<code>x1,y1,x2,y2....</code>)    </li>
</ul>
</li>
<li><strong>polygon:多边形</strong><ul>
<li>折线闭合  <code>fill-rule:evenodd/nonzero</code>;</li>
</ul>
</li>
<li><p><strong>path: 路劲</strong></p>
<ul>
<li><code>d</code>属性</li>
<li><code>M(起始坐标)</code>,<code>L(结束坐标)</code>,<code>H(水平线)</code>,<code>V(垂直线)</code>,<code>A(圆弧)</code>,<code>Z(闭合路劲)</code><ul>
<li><code>C</code>,<code>S</code>,<code>Q</code>,<code>T</code> 贝塞尔曲线</li>
<li>大写为绝对坐标(具体的坐标位置)</li>
<li>小写为相对坐标(相对起始坐标点的具体长度)</li>
</ul>
</li>
<li>A命令<ul>
<li><code>x</code>半径 <code>y</code>半径 角度  弧长(0 小弧 1大弧)  方向(0逆时针 1顺时针)</li>
<li>终点<code>(x y)</code></li>
</ul>
</li>
</ul>
</li>
<li><p><strong>C命令：三次贝塞尔曲线</strong></p>
<ul>
<li><code>(x1,y1,x2,y2,x,y)</code>    <code>x1</code>,<code>y1</code>控制点一    <code>x2</code>,<code>y2</code>控制点二   <code>x</code>,<code>y</code>结束点</li>
</ul>
</li>
<li><strong>S命令：平滑贝塞尔曲线(自动对称一个控制点)</strong><ul>
<li><code>(x2,y2,x,y)</code>  <code>x2</code>,<code>y2</code>控制点    x,y结束点</li>
</ul>
</li>
<li><strong>Q命令：二次贝塞尔曲线</strong><ul>
<li><code>(x1,y1,x,y)</code>   x1,y1控制点  x,y结束点</li>
</ul>
</li>
<li><p><strong>T命令：一次贝塞尔曲线</strong></p>
<ul>
<li><code>(x,y)</code>结束点</li>
</ul>
</li>
<li><p><strong><code>g</code>标签:组合元素  设置元素公共属性</strong></p>
<ul>
<li>共用属性</li>
<li><code>transform = &quot;translate(0,0)&quot;</code></li>
</ul>
</li>
<li><p><strong><code>text</code>标签</strong></p>
<ul>
<li><code>x</code>, <code>y</code>, <code>text-anchor</code>(对齐start end middle)    <code>font-size</code></li>
</ul>
</li>
<li><p><strong><code>image</code> 标签</strong></p>
<ul>
<li><code>x</code>, <code>y</code>, <code>width</code>  <code>height</code></li>
<li><code>xlink:href</code>(图片地址)</li>
</ul>
</li>
</ul>
<h4 id="第十五课-地理信息与本地存储"><a href="#第十五课-地理信息与本地存储" class="headerlink" title="第十五课 地理信息与本地存储"></a>第十五课 地理信息与本地存储</h4><hr>
<h5 id="地理位置"><a href="#地理位置" class="headerlink" title="地理位置"></a>地理位置</h5><hr>
<ul>
<li>经度  :   南北极的连接线</li>
<li><p>纬度  :   东西连接的线</p>
</li>
<li><p>位置信息从何而来</p>
<ul>
<li><code>IP</code>地址</li>
<li><code>GPS</code>全球定位系统</li>
<li><code>Wi-Fi</code>无线网络</li>
<li>基站</li>
</ul>
</li>
<li><p><code>avigator.geolocation</code></p>
<ul>
<li>单次定位请求  ：<code>getCurrentPosition</code>(请求成功,请求失败,数据收集方式)</li>
<li><p><strong>请求成功函数</strong></p>
<ul>
<li>经度 :  <code>coords.longitude</code></li>
<li>纬度 :  <code>coords.latitude</code></li>
<li>准确度 :  <code>coords.accuracy</code></li>
<li>海拔 : <code>coords.altitude</code></li>
<li>海拔准确度 :  <code>coords.altitudeAcuracy</code></li>
<li>行进方向 :  <code>coords.heading</code></li>
<li>地面速度 :  <code>coords.speed</code></li>
<li>请求的时间: <code>new Date(position.timestamp)</code></li>
</ul>
</li>
<li><p><strong>请求失败函数</strong></p>
<ul>
<li>失败编号  ：<code>code</code><ul>
<li>0  :  不包括其他错误编号中的错误</li>
<li>1  :  用户拒绝浏览器获取位置信息</li>
<li>2  :  尝试获取用户信息，但失败了</li>
<li>3  :   设置了<code>timeout</code>值，获取位置超时了</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>数据收集 :  json的形式</strong></p>
<ul>
<li><code>enableHighAcuracy</code>  :  更精确的查找，默认<code>false</code></li>
<li><code>timeout</code> :  获取位置允许最长时间，默认<code>infinity</code></li>
<li><code>maximumAge</code> :  位置可以缓存的最大时间，默认<code>0</code></li>
</ul>
</li>
<li><p><strong>多次定位请求*</strong>  : <code>watchPosition</code></p>
<ul>
<li>移动设备有用，位置改变才会触发</li>
<li>配置参数：<code>frequency</code> 更新的频率</li>
<li>关闭更新请求  :  <code>clearWatch</code></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><strong>examp01 getCurrentPosition</strong></li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"btn"</span>&gt;</span>请求位置信息<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"box"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span><br><span class="line"><span class="keyword">var</span> box = <span class="built_in">document</span>.getElementById(<span class="string">"box"</span>);</span><br><span class="line">		</span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			navigator.geolocation.getCurrentPosition(<span class="function"><span class="keyword">function</span>(<span class="params">position</span>)</span>&#123;</span><br><span class="line">				box.innerHTML +=<span class="string">"经度："</span>+position.coords.longitude + <span class="string">"&lt;br&gt;"</span>;</span><br><span class="line">				box.innerHTML +=<span class="string">"纬度："</span>+position.coords.latitude + <span class="string">"&lt;br&gt;"</span>;</span><br><span class="line">				box.innerHTML +=<span class="string">"海拔："</span>+position.coords.accuracy + <span class="string">"&lt;br&gt;"</span>;</span><br><span class="line">				box.innerHTML +=<span class="string">"海拔的准确度："</span>+position.coords.altitudeAccuracy + <span class="string">"&lt;br&gt;"</span>;</span><br><span class="line">				box.innerHTML +=<span class="string">"地面速度"</span>+position.coords.speed + <span class="string">"&lt;br&gt;"</span>;</span><br><span class="line">				box.innerHTML +=<span class="string">"行进方向"</span>+position.coords.heading + <span class="string">"&lt;br&gt;"</span>;</span><br><span class="line">				box.innerHTML +=<span class="string">"请求时间"</span>+<span class="keyword">new</span> <span class="built_in">Date</span>(position.timestamp) + <span class="string">"&lt;br&gt;"</span>;</span><br><span class="line">			&#125;,<span class="function"><span class="keyword">function</span>(<span class="params">err</span>)</span>&#123;</span><br><span class="line">				alert(err.code);</span><br><span class="line">			&#125;,&#123;</span><br><span class="line">				enableHighAccuracy:<span class="literal">false</span>,<span class="comment">//精确请求</span></span><br><span class="line">				timeout:<span class="number">5000</span>,<span class="comment">//设置超时</span></span><br><span class="line">				maximumAge:<span class="number">1000</span><span class="comment">//缓存时间</span></span><br><span class="line">			&#125;);</span><br><span class="line">		&#125;</span><br></pre></td></tr></table></figure>
<p><a href="http://codepen.io/poetries/pen/RKPWMg" target="_blank" rel="noopener">在线演示</a></p>
<ul>
<li><strong>examp02 </strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span><br><span class="line"><span class="keyword">var</span> box = <span class="built_in">document</span>.getElementById(<span class="string">"box"</span>);</span><br><span class="line">		</span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			navigator.geolocation.watchPosition(<span class="function"><span class="keyword">function</span>(<span class="params">position</span>)</span>&#123;</span><br><span class="line">				box.innerHTML +=<span class="string">"经度："</span>+position.coords.longitude + <span class="string">"&lt;br&gt;"</span>;</span><br><span class="line">				box.innerHTML +=<span class="string">"纬度："</span>+position.coords.latitude + <span class="string">"&lt;br&gt;"</span>;</span><br><span class="line">				box.innerHTML +=<span class="string">"海拔："</span>+position.coords.accuracy + <span class="string">"&lt;br&gt;"</span>;</span><br><span class="line">				box.innerHTML +=<span class="string">"海拔的准确度："</span>+position.coords.altitudeAccuracy + <span class="string">"&lt;br&gt;"</span>;</span><br><span class="line">				box.innerHTML +=<span class="string">"地面速度"</span>+position.coords.speed + <span class="string">"&lt;br&gt;"</span>;</span><br><span class="line">				box.innerHTML +=<span class="string">"行进方向"</span>+position.coords.heading + <span class="string">"&lt;br&gt;"</span>;</span><br><span class="line">				box.innerHTML +=<span class="string">"请求时间"</span>+<span class="keyword">new</span> <span class="built_in">Date</span>(position.timestamp) + <span class="string">"&lt;br&gt;"</span>;</span><br><span class="line">			&#125;,<span class="function"><span class="keyword">function</span>(<span class="params">err</span>)</span>&#123;</span><br><span class="line">				alert(err.code);</span><br><span class="line">			&#125;,&#123;</span><br><span class="line">				enableHighAccuracy:<span class="literal">false</span>,<span class="comment">//精确请求</span></span><br><span class="line">				timeout:<span class="number">5000</span>,<span class="comment">//设置超时</span></span><br><span class="line">				maximumAge:<span class="number">1000</span><span class="comment">//缓存时间</span></span><br><span class="line">			&#125;);</span><br><span class="line">		&#125;</span><br></pre></td></tr></table></figure>
<p><a href="http://codepen.io/poetries/pen/zNGvjY" target="_blank" rel="noopener">在线演示</a></p>
<ul>
<li><strong>example03 高德地图应用</strong></li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-id">#container</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>:<span class="number">600px</span>; </span><br><span class="line">    <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">margin</span>:<span class="number">40px</span> auto;</span><br><span class="line">    <span class="attribute">border</span>:<span class="number">1px</span> solid red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span>  </span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> </span></span><br><span class="line"><span class="tag"><span class="attr">src</span>=<span class="string">"http://webapi.amap.com/maps?v=1.3&amp;key=278b7b8b4728ba302b7e566fc2a97b36"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> map = <span class="keyword">new</span> AMap.Map(<span class="string">'container'</span>);</span><br></pre></td></tr></table></figure>
<p><a href="http://codepen.io/poetries/pen/qRdOKZ" target="_blank" rel="noopener">在线演示</a></p>
<ul>
<li><strong>examp04  搜索城市</strong></li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-id">#container</span> &#123;<span class="attribute">width</span>:<span class="number">500px</span>; <span class="attribute">height</span>:<span class="number">500px</span>; <span class="attribute">margin</span>:<span class="number">100px</span> auto;&#125;  </span><br><span class="line"><span class="selector-class">.menu</span>&#123;</span><br><span class="line">	<span class="attribute">width</span>:<span class="number">100px</span>;</span><br><span class="line">	<span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">5px</span> <span class="number">#000</span>;</span><br><span class="line">	<span class="attribute">margin</span>:auto;</span><br><span class="line">	<span class="attribute">background</span>:<span class="number">#fff</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.menu</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span>&#123;</span><br><span class="line">	<span class="attribute">list-style</span>:none;</span><br><span class="line">	<span class="attribute">line-height</span>:<span class="number">30px</span>;</span><br><span class="line">	<span class="attribute">text-align</span>:center;</span><br><span class="line">	<span class="attribute">cursor</span>:pointer;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#box</span>&#123;</span><br><span class="line">	<span class="attribute">width</span>:<span class="number">400px</span>;</span><br><span class="line">	<span class="attribute">height</span>:<span class="number">40px</span>;</span><br><span class="line">	<span class="attribute">position</span>:absolute;</span><br><span class="line">	<span class="attribute">top</span>:<span class="number">150px</span>;</span><br><span class="line">	<span class="attribute">left</span>:<span class="number">50%</span>;</span><br><span class="line">	<span class="attribute">margin-left</span>:-<span class="number">200px</span>;</span><br><span class="line">	<span class="attribute">background</span>:<span class="number">#fff</span>;</span><br><span class="line">	<span class="attribute">box-shadow</span>:<span class="number">0</span> <span class="number">0</span> <span class="number">10px</span> <span class="number">#000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">input</span>&#123;</span><br><span class="line">	<span class="attribute">height</span>:<span class="number">38px</span>;</span><br><span class="line">	<span class="attribute">width</span>:<span class="number">300px</span>;</span><br><span class="line">	<span class="attribute">border</span>:none;</span><br><span class="line">	<span class="attribute">outline</span>:none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#btn</span>&#123;</span><br><span class="line">	<span class="attribute">width</span>:<span class="number">80px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span> </span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"box"</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">id</span>=<span class="string">"city"</span> <span class="attr">placeholder</span>=<span class="string">"请输入城市..."</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"搜索"</span> <span class="attr">id</span>=<span class="string">"btn"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> </span></span><br><span class="line"><span class="tag"><span class="attr">src</span>=<span class="string">"http://webapi.amap.com/maps?v=1.3&amp;key=278b7b8b4728ba302b7e566fc2a97b36"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span><br><span class="line"><span class="keyword">var</span> city = <span class="built_in">document</span>.getElementById(<span class="string">"city"</span>);</span><br><span class="line"><span class="keyword">var</span> map = <span class="keyword">new</span> AMap.Map(<span class="string">'container'</span>);</span><br><span class="line"><span class="keyword">var</span> toolBar,mouseTool,contextMenu;</span><br><span class="line"><span class="comment">//在地图中添加操作toolBar插件、mouseTool插件</span></span><br><span class="line">map.plugin([<span class="string">"AMap.ToolBar"</span>,<span class="string">"AMap.MouseTool"</span>],<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	toolBar = <span class="keyword">new</span> AMap.ToolBar();</span><br><span class="line">	map.addControl(toolBar);</span><br><span class="line">	mouseTool = <span class="keyword">new</span> AMap.MouseTool(map);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">var</span> menuContext = <span class="built_in">document</span>.createElement(<span class="string">"div"</span>);</span><br><span class="line">menuContext.innerHTML = <span class="string">"&lt;div class=menu&gt;&lt;ul&gt;&lt;li onclick='zoomMenu(0)'&gt;缩小&lt;/li&gt;</span></span><br><span class="line"><span class="string">&lt;li onclick='zoomMenu(1)'&gt;放大&lt;/li&gt;</span></span><br><span class="line"><span class="string">&lt;li onclick='distanceMeasureMenu()'&gt;距离量测&lt;/li&gt;</span></span><br><span class="line"><span class="string">&lt;li onclick = 'addMarkerMenu()'&gt;添加标记&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;"</span>;</span><br><span class="line"><span class="comment">//创建一个自定义的右键菜单</span></span><br><span class="line">contextMenu = <span class="keyword">new</span> AMap.ContextMenu(&#123;<span class="attr">isCustom</span>:<span class="literal">true</span>,<span class="attr">content</span>:menuContext&#125;);</span><br><span class="line"><span class="comment">//给地图绑鼠标右键功能弹出右键菜单</span></span><br><span class="line">AMap.event.addListener(map,<span class="string">"rightclick"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">	contextMenu.open(map,e.lnglat);<span class="comment">//e.lnglat鼠标点击的经纬度</span></span><br><span class="line">	contextMenuPosition = e.lnglat;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//右键菜单缩放地图</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">zoomMenu</span>(<span class="params">n</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">if</span>(n === <span class="number">0</span>)&#123;map.zoomOut();&#125;</span><br><span class="line">	<span class="keyword">if</span>(n === <span class="number">1</span>)&#123;map.zoomIn();&#125;</span><br><span class="line">	contextMenu.close();</span><br><span class="line">&#125;</span><br><span class="line">contextMenu.close();</span><br><span class="line"><span class="comment">//测量距离功能</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">distanceMeasureMenu</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	mouseTool.rule();</span><br><span class="line">	contextMenu.close();</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//添加标注功能</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">addMarkerMenu</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	mouseTool.close();</span><br><span class="line">	<span class="keyword">var</span> marker = <span class="keyword">new</span> AMap.Marker(&#123;</span><br><span class="line">		map: map,</span><br><span class="line">		position: contextMenuPosition, <span class="comment">//基点位置</span></span><br><span class="line">		offset: &#123;<span class="attr">x</span>:<span class="number">-5</span>,<span class="attr">y</span>:<span class="number">-10</span>&#125; <span class="comment">//相对于基点位置</span></span><br><span class="line">	&#125;);</span><br><span class="line">	contextMenu.close();</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//搜索城市</span></span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> val = city.value;</span><br><span class="line">	map.setCity(val);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><a href="http://codepen.io/poetries/pen/xgGwaZ" target="_blank" rel="noopener">在线演示</a></p>
<h5 id="本地存储"><a href="#本地存储" class="headerlink" title="本地存储"></a>本地存储</h5><hr>
<ul>
<li><p><strong><code>Storage</code></strong></p>
<ul>
<li><code>sessionStorage</code><ul>
<li><code>session</code>临时回话，从页面打开到页面关闭的时间段</li>
<li>窗口的临时存储，页面关闭，本地存储消失</li>
</ul>
</li>
<li><code>localStorage</code><ul>
<li>永久存储（可以手动删除数据）</li>
</ul>
</li>
</ul>
</li>
<li><p><strong><code>Storage</code>的特点</strong></p>
<ul>
<li>存储量限制 ( 5M )</li>
<li>客户端完成，不会请求服务器处理</li>
<li><code>sessionStorage</code>数据是不共享、 <code>localStorage</code>共享</li>
</ul>
</li>
<li><p><strong><code>Storage API</code></strong></p>
<ul>
<li><code>setItem()</code>:<ul>
<li>设置数据，(<code>key</code>,<code>value</code>)类型，类型都是字符串</li>
<li>可以用获取属性的形式操作</li>
</ul>
</li>
<li><code>getItem():</code><ul>
<li>获取数据，通过<code>key</code>来获取到相应的<code>value</code></li>
</ul>
</li>
<li><code>removeItem()</code>:<ul>
<li>删除数据，通过key来删除相应的<code>value</code></li>
</ul>
</li>
<li><code>clear()</code>:<ul>
<li>删除全部存储的值</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>存储事件:</strong></p>
<ul>
<li>当数据有修改或删除的情况下，就会触发<code>storage</code>事件</li>
<li>在对数据进行改变的窗口对象上是不会触发的`</li>
<li><code>Key</code> : 修改或删除的<code>key</code>值，如果调用<code>clear()</code>,<code>key</code>为<code>null</code></li>
<li><code>newValue</code>  :  新设置的值，如果调用<code>removeStorage()</code>,<code>key</code>为<code>null</code></li>
<li><code>oldValue</code> :  调用改变前的<code>value</code>值</li>
<li><code>storageArea</code> : 当前的<code>storage</code>对象</li>
<li><code>url</code> :  触发该脚本变化的文档的url</li>
<li>注：<code>session</code>同窗口才可以,例子：<code>iframe</code>操作</li>
</ul>
</li>
</ul>
<h4 id="第十六课-HTML5新增JS方法"><a href="#第十六课-HTML5新增JS方法" class="headerlink" title="第十六课 HTML5新增JS方法"></a>第十六课 HTML5新增JS方法</h4><hr>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-aec985a8f543f52e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="H5在JavaScript中新增的方法一览"></p>
<ul>
<li><p><strong>新增选择器</strong></p>
<ul>
<li><code>document.querySelector()</code> 选择单个元素</li>
<li><code>document.querySelectorAll()</code> 选择所有的</li>
<li><code>document.getElementsByClassName()</code> 通过类名选择</li>
</ul>
</li>
<li><p><strong>延迟加载JS</strong></p>
<ul>
<li><code>JS</code>的加载会影响后面的内容加载<ul>
<li>很多浏览器都采用了并行加载JS，但还是会影响其他内容</li>
</ul>
</li>
<li><code>Html5</code>的<code>defer</code>和<code>async</code><ul>
<li><code>defer=“defer ”</code>: 延迟加载，会按顺序执行，在<code>onload</code>执行前被触发</li>
<li><code>async =“async”</code>: 异步加载，加载完就触发，有顺序问题</li>
</ul>
</li>
<li>浏览器兼容性：<code>Labjs</code>库</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">* 动态加载script文件 （推荐方法） 只需请求一次 可加载多个JavaScript文件，减少请求次数以及页面的加载阻塞</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">loadScript</span>(<span class="params">url,callback</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> script = <span class="built_in">document</span>.createElement(<span class="string">"script"</span>);</span><br><span class="line">	script.type = <span class="string">"text/javascript"</span>;</span><br><span class="line">	<span class="keyword">if</span>(script.readyState)&#123;<span class="comment">//IE</span></span><br><span class="line">		script.onreadystatechange = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="keyword">if</span>(script.readyState == <span class="string">"loaded"</span> || script.readyState == <span class="string">"complete"</span>)&#123;</span><br><span class="line">				onreadystatechange = <span class="literal">null</span>;</span><br><span class="line">				callback();</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">		</span><br><span class="line">	&#125;<span class="keyword">else</span> &#123;</span><br><span class="line">		script.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			callback();</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	script.src = url;</span><br><span class="line">	<span class="built_in">document</span>.getElementsByTagName(<span class="string">"head"</span>)[<span class="number">0</span>].appendChild(script);</span><br><span class="line">&#125;</span><br><span class="line">loadScript(<span class="string">"js/defer.js"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">"加载成功"</span>);</span><br><span class="line">      <span class="comment">//  加载成功回调</span></span><br><span class="line">&#125;);</span><br><span class="line">loadScript(<span class="string">"js/async.js"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">"加载成功"</span>);</span><br><span class="line">   <span class="comment">//  加载成功回调</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li><p><strong>获取<code>class</code>列表属性</strong></p>
<ul>
<li><code>classList</code><ul>
<li><code>length</code> :  <code>class</code>的长度</li>
<li><code>add()</code> :  添加<code>class</code>方法</li>
<li><code>remove()</code>  :  删除<code>class</code>方法</li>
<li><code>toggle()</code> :  切换<code>class</code>方法 </li>
<li><code>contains()</code> : 判断类名是否存在返回<code>bool</code>值</li>
</ul>
</li>
</ul>
</li>
<li><p><strong><code>JSON</code>的新方法</strong></p>
<ul>
<li><code>parse()</code> : 把字符串转成<code>json</code><ul>
<li>字符串中的属性要严格的加上引号</li>
</ul>
</li>
<li><p><code>stringify()</code> : 把<code>json</code>转化成字符串</p>
<ul>
<li>会自动的把双引号加上</li>
</ul>
</li>
<li><p>与<code>eval</code>的区别</p>
<ul>
<li><code>eval()</code>：对任何的字符串进行解析变成js</li>
<li><code>parse()</code>：字符串中的属性要严格的加上引号</li>
</ul>
</li>
<li>其他浏览器兼容<ul>
<li><a href="http://www.json.org/" target="_blank" rel="noopener">去下载json2.js</a></li>
</ul>
</li>
</ul>
</li>
<li><p><strong>历史管理</strong></p>
<ul>
<li><code>onhashchange</code> ：改变hash值来管理</li>
<li><code>history</code>  ：<ul>
<li>服务器下运行<ul>
<li><code>pushState</code> :  三个参数 ：数据  标题(都没实现)  地址(可选)</li>
<li><code>onpopstate</code>事件 :  读取数据   <code>event.state</code></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="第十七课-HTML5拖拽事件"><a href="#第十七课-HTML5拖拽事件" class="headerlink" title="第十七课 HTML5拖拽事件"></a>第十七课 HTML5拖拽事件</h4><hr>
<ul>
<li>图片自带拖拽功能</li>
<li>其他元素可设置<code>draggable</code>属性</li>
<li><p><strong><code>draggable ：true</code></strong></p>
<ul>
<li>拖拽元素(被拖拽元素对象)事件 :  <ul>
<li><code>ondragstart</code> : 拖拽前触发 </li>
<li><code>ondrag</code> :拖拽前、拖拽结束之间，连续触发</li>
<li><code>ondragend</code> :拖拽结束触发</li>
</ul>
</li>
<li>目标元素(拖拽元素被拖到的对象)事件 :  <ul>
<li><code>ondragenter</code> :进入目标元素触发</li>
<li><code>ondragover</code>:进入目标、离开目标之间，连续触发</li>
<li><code>ondragleave</code> :离开目标元素触发</li>
<li><code>ondrop</code> :在目标元素上释放鼠标触发<ul>
<li>需要在<code>ondragover</code>事件里面阻止默认事件</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>拖拽兼容问题</strong></p>
<ul>
<li><p>火狐浏览器下需设置<code>dataTransfer</code>对象才可以拖拽除图片外的其他标签</p>
<ul>
<li><code>dataTransfer</code>对象</li>
<li><code>setData()</code> : 设置数据 <code>key</code>和<code>value</code>(必须是字符串)</li>
<li><code>getData()</code> : 获取数据，根据<code>key</code>值，获取对应的<code>value</code></li>
<li><p><code>effectAllowed</code> : 设置光标样式(<code>none</code>, <code>copy</code>, <code>copyLink</code>, <code>copyMove</code>, <code>link</code>, <code>linkMove</code>,<code>move</code>, <code>all</code> 和<code>uninitialized</code>)</p>
</li>
<li><p><code>setDragImage</code> ：三个参数（指定的元素，坐标<code>X</code>，坐标<code>Y</code>）</p>
</li>
<li><code>files</code>： 获取外部拖拽的文件，返回一个<code>filesList</code>列表<ul>
<li><code>filesList</code>下有个<code>type</code>属性，返回文件的类型</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>读取文件信息</strong></p>
<ul>
<li><code>FileReader</code>(读取文件信息)<ul>
<li><code>readAsDataURL</code></li>
</ul>
</li>
<li>参数为要读取的文件对象<ul>
<li><code>onload</code>当读取文件成功完成的时候触发此事件</li>
<li><code>this. result</code> 获取读取的文件数据</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>examp01 拖拽案例</strong></p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"drap"</span> <span class="attr">draggable</span>=<span class="string">"true"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"box"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-id">#drap</span> &#123;</span><br><span class="line">	<span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">	<span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">	<span class="attribute">background</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#box</span> &#123;</span><br><span class="line">	<span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">	<span class="attribute">height</span>: <span class="number">500px</span>;</span><br><span class="line">	<span class="attribute">border</span>: <span class="number">2px</span> solid blue;</span><br><span class="line">	<span class="attribute">margin</span>: <span class="number">50px</span> auto;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//被拖拽元素事件</span></span><br><span class="line">drap.ondragstart = <span class="function"><span class="keyword">function</span>(<span class="params">ev</span>)</span>&#123; <span class="comment">// 拖拽前</span></span><br><span class="line">	<span class="keyword">var</span> ev = ev || <span class="built_in">window</span>.event;</span><br><span class="line"></span><br><span class="line">	<span class="comment">//火狐浏览器下需设置dataTransfer对象才可以拖拽除图片外的其他标签</span></span><br><span class="line">	ev.dataTransfer.setData(<span class="string">"key"</span>,<span class="string">"poetries"</span>);</span><br><span class="line"></span><br><span class="line">	<span class="comment">//effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove,move, all 和uninitialized)</span></span><br><span class="line">	ev.dataTransfer.effectAllowed = <span class="string">"copy"</span>;</span><br><span class="line"></span><br><span class="line">	<span class="comment">//设置被拖拽的小元素 setDragImage ：三个参数（指定的元素，坐标X，坐标Y）</span></span><br><span class="line">	ev.dataTransfer.setDragImage(pic,<span class="number">25</span>,<span class="number">25</span>);</span><br><span class="line"></span><br><span class="line">	<span class="keyword">this</span>.style.background = <span class="string">"green"</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">drap.ondrag = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 拖拽过程中</span></span><br><span class="line">	<span class="keyword">this</span>.innerText = <span class="string">"被拖拽中..."</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">drap.ondragend = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 拖拽结束</span></span><br><span class="line">	<span class="keyword">this</span>.style.background = <span class="string">"red"</span>;</span><br><span class="line">	<span class="keyword">this</span>.innerHTML = <span class="string">""</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//目标元素事件</span></span><br><span class="line">box.ondragenter = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; <span class="comment">//进入目标元素触发</span></span><br><span class="line">	<span class="keyword">this</span>.innerHTML = <span class="string">"可将文件拖放到这里!"</span>;</span><br><span class="line">&#125;</span><br><span class="line">box.ondragover = <span class="function"><span class="keyword">function</span>(<span class="params">ev</span>)</span>&#123; <span class="comment">//进入目标、离开目标之间，连续触发</span></span><br><span class="line">	<span class="keyword">var</span> ev = ev || <span class="built_in">window</span>.event;</span><br><span class="line">	ev.preventDefault(); </span><br><span class="line">	<span class="keyword">this</span>.style.background = <span class="string">"pink"</span>;</span><br><span class="line">&#125;</span><br><span class="line">box.ondragleave = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; <span class="comment">//离开目标元素触发</span></span><br><span class="line">	<span class="keyword">this</span>.innerHTML = <span class="string">""</span>;</span><br><span class="line">	<span class="keyword">this</span>.style.background = <span class="string">"none"</span>;</span><br><span class="line">&#125;</span><br><span class="line">box.ondrop = <span class="function"><span class="keyword">function</span>(<span class="params">ev</span>)</span>&#123;<span class="comment">//在目标元素上释放鼠标触发</span></span><br><span class="line">	<span class="comment">//alert("拖放结束")</span></span><br><span class="line">	<span class="keyword">this</span>.innerHTML = ev.dataTransfer.getData(<span class="string">"key"</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><a href="http://codepen.io/poetries/pen/Ndqaxx" target="_blank" rel="noopener">在线演示</a></p>
<ul>
<li><strong>example02 拖拽相册</strong></li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>请拖拽图片到红框中<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"box"</span>&gt;</span><span class="tag">&lt;<span class="name">span</span>&gt;</span>可以将文件拖放到这里！！<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"dustbin"</span>&gt;</span>垃圾回收站<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-id">#box</span>&#123;</span><br><span class="line">	<span class="attribute">position</span>:relative;</span><br><span class="line">	<span class="attribute">width</span>:<span class="number">500px</span>;</span><br><span class="line">	<span class="attribute">height</span>:<span class="number">500px</span>;</span><br><span class="line">	<span class="attribute">border</span>:<span class="number">2px</span> solid red;</span><br><span class="line">	<span class="attribute">margin</span>:<span class="number">100px</span> auto <span class="number">0px</span>;</span><br><span class="line">	</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#box</span> <span class="selector-tag">span</span>&#123;</span><br><span class="line">	<span class="attribute">position</span>:absolute;</span><br><span class="line">	<span class="attribute">left</span>:<span class="number">0</span>;</span><br><span class="line">	<span class="attribute">top</span>:<span class="number">0</span>;</span><br><span class="line">	<span class="attribute">right</span>:<span class="number">0</span>;</span><br><span class="line">	<span class="attribute">bottom</span>:<span class="number">0</span>;</span><br><span class="line">	<span class="attribute">height</span>:<span class="number">50px</span>;</span><br><span class="line">	<span class="attribute">width</span>:<span class="number">192px</span>;</span><br><span class="line">	<span class="attribute">margin</span>:auto;</span><br><span class="line">	<span class="attribute">display</span>:none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">img</span>&#123;</span><br><span class="line">	<span class="attribute">width</span>:<span class="number">100px</span>;<span class="attribute">height</span>:<span class="number">100px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#dustbin</span>&#123;</span><br><span class="line">	<span class="attribute">width</span>:<span class="number">200px</span>;</span><br><span class="line">	<span class="attribute">height</span>:<span class="number">100px</span>;</span><br><span class="line">	<span class="attribute">background</span>:<span class="number">#000</span>;</span><br><span class="line">	<span class="attribute">color</span>:<span class="number">#fff</span>;</span><br><span class="line">	<span class="attribute">font-size</span>:<span class="number">40px</span>;</span><br><span class="line">	<span class="attribute">text-align</span>:center;</span><br><span class="line">	<span class="attribute">line-height</span>:<span class="number">100px</span>;</span><br><span class="line">	<span class="attribute">margin</span>:auto;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> box = <span class="built_in">document</span>.getElementById(<span class="string">"box"</span>);</span><br><span class="line"><span class="keyword">var</span> dusTbin = <span class="built_in">document</span>.getElementById(<span class="string">"dustbin"</span>);</span><br><span class="line"><span class="keyword">var</span> span = box.getElementsByTagName(<span class="string">"span"</span>)[<span class="number">0</span>];</span><br><span class="line"><span class="comment">//目标元素事件</span></span><br><span class="line"><span class="keyword">var</span> img = <span class="string">''</span>;</span><br><span class="line">box.ondragenter = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="comment">//进入目标元素触发</span></span><br><span class="line">	span.style.display = <span class="string">"block"</span>;</span><br><span class="line">&#125;</span><br><span class="line">box.ondragover = <span class="function"><span class="keyword">function</span>(<span class="params">ev</span>)</span>&#123;<span class="comment">//在目标元素上连续触发</span></span><br><span class="line">	<span class="keyword">var</span> ev = ev||<span class="built_in">window</span>.event;</span><br><span class="line">	ev.preventDefault();<span class="comment">//阻止默认事件</span></span><br><span class="line">	span.style.display = <span class="string">"block"</span>;</span><br><span class="line">&#125;</span><br><span class="line">box.ondragleave = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="comment">//离开目标元素</span></span><br><span class="line">	span.style.display = <span class="string">"none"</span>;</span><br><span class="line">&#125;</span><br><span class="line">box.ondrop = <span class="function"><span class="keyword">function</span>(<span class="params">ev</span>)</span>&#123;<span class="comment">//在目标元素上面释放鼠标触发</span></span><br><span class="line">	<span class="comment">//alert("拖拽结束！！");</span></span><br><span class="line">	<span class="keyword">var</span> ev = ev||<span class="built_in">window</span>.event;</span><br><span class="line">	ev.preventDefault();<span class="comment">//阻止默认事件</span></span><br><span class="line">	span.style.display = <span class="string">"none"</span>;</span><br><span class="line">	<span class="keyword">var</span> file = ev.dataTransfer.files;</span><br><span class="line">	<span class="comment">//alert(file[0].type);</span></span><br><span class="line">	<span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i&lt;file.length ;i++ )</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="keyword">if</span> (file[i].type.indexOf(<span class="string">"image"</span>)!=<span class="number">-1</span>)</span><br><span class="line">		&#123;</span><br><span class="line">			<span class="keyword">var</span> read = <span class="keyword">new</span> FileReader();<span class="comment">//新建一个读取文件对象</span></span><br><span class="line">			read.readAsDataURL(file[i]);<span class="comment">//读取文件</span></span><br><span class="line">			read.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="comment">//读取文件成功之后调用什么函数</span></span><br><span class="line">				<span class="keyword">var</span> img = <span class="built_in">document</span>.createElement(<span class="string">"img"</span>);</span><br><span class="line">				<span class="comment">//alert(this.result);</span></span><br><span class="line">				img.src = <span class="keyword">this</span>.result;</span><br><span class="line">				box.appendChild(img);</span><br><span class="line">				<span class="comment">//获取img节点 实现删除功能</span></span><br><span class="line">				<span class="keyword">var</span> oImg = <span class="built_in">document</span>.getElementsByTagName(<span class="string">"img"</span>);</span><br><span class="line">				<span class="keyword">if</span> (oImg)</span><br><span class="line">				&#123;</span><br><span class="line">					<span class="keyword">for</span> (<span class="keyword">var</span> j=<span class="number">0</span>;j&lt;oImg.length ;j++ )</span><br><span class="line">					&#123;</span><br><span class="line">						oImg[j].ondragstart = <span class="function"><span class="keyword">function</span>(<span class="params">ev</span>)</span>&#123;</span><br><span class="line">							ev.dataTransfer.setData(<span class="string">"data"</span>,ev.target.innerHTML);</span><br><span class="line">							img = ev.target;</span><br><span class="line">						&#125;</span><br><span class="line">						oImg[j].ondragend = <span class="function"><span class="keyword">function</span>(<span class="params">ev</span>)</span>&#123;</span><br><span class="line">							ev.dataTransfer.clearData(<span class="string">"data"</span>);<span class="comment">//清楚数据</span></span><br><span class="line">							img = <span class="literal">null</span>;</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;</span><br><span class="line"></span><br><span class="line">				&#125;</span><br><span class="line">				<span class="comment">//实现删除功能(移除img节点)</span></span><br><span class="line">				dusTbin.ondragover = <span class="function"><span class="keyword">function</span>(<span class="params">ev</span>)</span>&#123;</span><br><span class="line">					ev.preventDefault();</span><br><span class="line">				&#125;</span><br><span class="line">				dusTbin.ondrop = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">					<span class="keyword">if</span> (img)</span><br><span class="line">					&#123;</span><br><span class="line">						img.parentNode.removeChild(img);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			alert(<span class="string">"请上传图片！"</span>);</span><br><span class="line">		&#125;</span><br><span class="line">		</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><a href="http://codepen.io/poetries/pen/Ndqagr" target="_blank" rel="noopener">在线演示</a></p>
<ul>
<li><strong>example03 拖拽排序</strong></li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrap"</span> <span class="attr">id</span>=<span class="string">"wrap"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">"box"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">style</span>=<span class="string">"background:#f3f"</span> <span class="attr">draggable</span>=<span class="string">"true"</span>&gt;</span>1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">style</span>=<span class="string">"background:#ff6"</span> <span class="attr">draggable</span>=<span class="string">"true"</span>&gt;</span>2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">style</span>=<span class="string">"background:#c60"</span> <span class="attr">draggable</span>=<span class="string">"true"</span>&gt;</span>3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">style</span>=<span class="string">"background:#903"</span> <span class="attr">draggable</span>=<span class="string">"true"</span>&gt;</span>4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">style</span>=<span class="string">"background:#0f6"</span> <span class="attr">draggable</span>=<span class="string">"true"</span>&gt;</span>5<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">style</span>=<span class="string">"background:#636"</span> <span class="attr">draggable</span>=<span class="string">"true"</span>&gt;</span>6<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">style</span>=<span class="string">"background:#36f"</span> <span class="attr">draggable</span>=<span class="string">"true"</span>&gt;</span>7<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">style</span>=<span class="string">"background:#033"</span> <span class="attr">draggable</span>=<span class="string">"true"</span>&gt;</span>8<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.wrap</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>:<span class="number">500px</span>;</span><br><span class="line">  <span class="attribute">height</span>:<span class="number">500px</span>;</span><br><span class="line">  <span class="attribute">margin</span>:<span class="number">50px</span> auto;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ul</span> <span class="selector-tag">li</span>&#123;</span><br><span class="line">  <span class="attribute">list-style</span>:none;</span><br><span class="line">  <span class="attribute">width</span>:<span class="number">500px</span>;</span><br><span class="line">  <span class="attribute">height</span>:<span class="number">50px</span>;</span><br><span class="line">  <span class="attribute">color</span>:<span class="number">#fff</span>;</span><br><span class="line">  <span class="attribute">text-align</span>:center;</span><br><span class="line">  <span class="attribute">line-height</span>:<span class="number">50px</span>;</span><br><span class="line">  <span class="attribute">font-size</span>:<span class="number">40px</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>:bold;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> oUl = <span class="built_in">document</span>.getElementById(<span class="string">"box"</span>);</span><br><span class="line"><span class="keyword">var</span> oLi = oUl.getElementsByTagName(<span class="string">"li"</span>);</span><br><span class="line"><span class="keyword">var</span> curr = <span class="number">0</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sort</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>;i &lt; oLi.length;i++) &#123;</span><br><span class="line">    oLi[i].index = i;</span><br><span class="line">    oLi[i].ondragstart = <span class="function"><span class="keyword">function</span>(<span class="params">ev</span>)</span>&#123;</span><br><span class="line">      <span class="keyword">var</span> ev = ev || <span class="built_in">window</span>.event;</span><br><span class="line">      ev.dataTransfer.setData(<span class="string">"data"</span>,<span class="keyword">this</span>.innerHTML);</span><br><span class="line">      <span class="comment">//this.innerHTML = "被拖拽中...";</span></span><br><span class="line">      curr = <span class="keyword">this</span>.index;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    oLi[i].ondragenter = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>;i &lt; oLi.length;i++)&#123;</span><br><span class="line">        oLi[i].style.border = <span class="string">"none"</span>;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">if</span>(curr != <span class="keyword">this</span>.index)&#123;</span><br><span class="line">        <span class="keyword">this</span>.style.border = <span class="string">"2px solid #000"</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    oLi[i].ondragover = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">      <span class="keyword">var</span> e = e || <span class="built_in">window</span>.event;</span><br><span class="line">      e.preventDefault();</span><br><span class="line">    &#125;</span><br><span class="line">    oLi[i].ondrop = <span class="function"><span class="keyword">function</span>(<span class="params">ev</span>)</span>&#123; <span class="comment">//鼠标释放的时候</span></span><br><span class="line">      <span class="comment">//oUl.insertBefore(oLi[curr],this);//insertBefore(新节点，目标节点)</span></span><br><span class="line">      inserAfter(oLi[curr],<span class="keyword">this</span>);</span><br><span class="line">      <span class="keyword">this</span>.style.border = <span class="string">"none"</span>;</span><br><span class="line">      <span class="comment">//oLi[curr].innerHTML = ev.DataTransfer.getData("data");</span></span><br><span class="line">      sort();</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">sort();</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">inserAfter</span>(<span class="params">newItem,targerItem</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> parentItem = targerItem.parentNode;</span><br><span class="line">  <span class="keyword">if</span>(parentItem.lastChild == targerItem)&#123;</span><br><span class="line">    parentItem.appendChild(newItem);</span><br><span class="line">  &#125;<span class="keyword">else</span> &#123;</span><br><span class="line">    parentItem.insertBefore(newItem,targerItem.nextSibling);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><a href="http://codepen.io/poetries/pen/XpbEOW" target="_blank" rel="noopener">在线演示</a></p>
<h4 id="第十八课-跨文档操作"><a href="#第十八课-跨文档操作" class="headerlink" title="第十八课 跨文档操作"></a>第十八课 跨文档操作</h4><hr>
<ul>
<li><p><strong>跨文档请求</strong></p>
</li>
<li><p>同域跨文档</p>
<ul>
<li><code>iframe</code>内页：<ul>
<li>父页面操作子页面：<code>contentWindow</code></li>
<li>子页面操作父页面：<code>window.top</code>(找到最顶级的父页面)/<code>parent</code>(第一父页面)</li>
<li>新窗口页：<ul>
<li>父页面操作子页面：<code>window.open</code></li>
<li>子页面操作父页面：<code>window.opener</code></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>不同域跨文档</strong></p>
<ul>
<li><code>postMessage（“发送的数据”,”接收的域”）</code><ul>
<li><code>message</code>事件监听</li>
<li><code>ev.origin</code>发送数据来源的域</li>
<li><code>ev.data</code> 发送的数据</li>
</ul>
</li>
<li>通过判断发送的数据来执行相应的需求</li>
</ul>
</li>
<li><p><strong>ajax跨域</strong></p>
<ul>
<li><p><code>XMLHttpRequest</code> 新增功能</p>
<ul>
<li>跨域请求：修改服务端头信息<ul>
<li>I<code>E</code>兼容：<code>XDomaiRequest</code></li>
</ul>
</li>
</ul>
</li>
<li><p>进度事件：</p>
<ul>
<li><code>upload.onprogress(ev)</code> 上传进度(实现文件上传进度条)<ul>
<li><code>ev.total</code>  发送文件的总量</li>
<li><code>ev.loaded</code> 已发送的量</li>
</ul>
</li>
<li><code>FormData</code>  构建提交二进制数据</li>
</ul>
</li>
</ul>
</li>
<li><p>拓展阅读</p>
<ul>
<li><a href="http://mp.weixin.qq.com/s?__biz=MzI0ODA2ODU2NQ==&amp;mid=2651130595&amp;idx=2&amp;sn=3d0f546f1867992729b3ace5d03766fc&amp;chksm=f257ca59c520434f08e215b3bdcec3764712f73301b738c18163359e5aa5e949ff019616ffca&amp;mpshare=1&amp;scene=23&amp;srcid=11289XUSBAQzrCp3Io55aoS1#rd" target="_blank" rel="noopener">HTML5 API 大盘点</a></li>
</ul>
</li>
</ul>
<h6 id="附录一-css3响应式布局"><a href="#附录一-css3响应式布局" class="headerlink" title="附录一　css3响应式布局"></a>附录一　css3响应式布局</h6><hr>
<ul>
<li><p>媒体类型</p>
<ul>
<li><code>*all</code> 所有媒体</li>
<li><code>braille</code> 盲文触觉设备</li>
<li><code>embossed</code> 盲文打印机</li>
<li><code>*print</code> 手持设备 </li>
<li><code>projection</code> 打印预览</li>
<li><code>*screen</code> 彩屏设备</li>
<li><code>speech</code> ‘听觉’类似的媒体类型</li>
<li><code>tty</code>不适用像素的设备</li>
<li><code>tv</code> 电视</li>
</ul>
</li>
<li><p>关键字</p>
<ul>
<li><code>and</code></li>
<li><code>not</code>    <code>not</code>关键字是用来排除某种制定的媒体类型</li>
<li><code>only</code>     <code>only</code>用来定某种特定的媒体类型</li>
</ul>
</li>
<li><p>媒体特性</p>
<ul>
<li><code>(max-width:600px)</code></li>
<li><code>(max-device-width: 480px)</code>     设备输出宽度</li>
<li><code>(orientation:portrait)</code>          竖屏</li>
<li><code>(orientation:landscape)</code>        横屏</li>
<li><code>(-webkit-min-device-pixel-ratio: 2)</code> 像素比</li>
<li><code>devicePixelRatio</code>             设备像素比 </li>
<li><code>window.devicePixelRatio = 物理像素 / dips</code></li>
</ul>
</li>
<li><p>样式引入</p>
</li>
</ul>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line">&lt;link rel="stylesheet" href="css/index.css" media="print" /&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="keyword">@import</span> url(<span class="string">"css/demo.css"</span>) screen;</span><br><span class="line"><span class="keyword">@media</span> screen&#123;    &#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line">&lt;link rel=”stylesheet” media=”all and</span><br><span class="line"> (orientation:portrait)” href=”portrait.css”&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line">&lt;link rel=”stylesheet” media=”all</span><br><span class="line"> and (orientation:landscape)”href=”landscape.css”&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">min-width:</span><span class="number">360px</span>) <span class="keyword">and</span> (<span class="attribute">max-width:</span><span class="number">500px</span>) &#123;&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line">&lt;link rel="stylesheet" type="text/css" </span><br><span class="line">href="indexA.css"  media="screen and (min-width: 800px)"&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line">&lt;link rel="stylesheet" type="text/css" </span><br><span class="line">href="indexB.css" media="screen and (min-width: 600px) and (max-width: 800px)"&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line">&lt;link rel="stylesheet" type="text/css" </span><br><span class="line">href="indexC.css"    media="screen and (max-width: 600px)"&gt;</span><br></pre></td></tr></table></figure>
<h6 id="附录二-HTML5速查表"><a href="#附录二-HTML5速查表" class="headerlink" title="附录二　HTML5速查表"></a>附录二　HTML5速查表</h6><hr>
<ul>
<li><a href="http://caniuse.com/#search=canvas" target="_blank" rel="noopener">可以查阅支持H5+CSS3的属性</a></li>
<li><a href="http://www.html5star.com/manual/html5label-meaning/" target="_blank" rel="noopener">HTML5 标签含义之元素周期表</a></li>
<li><a href="http://www.inmotionhosting.com/img/infographics/html5_cheat_sheet_tags.png" target="_blank" rel="noopener">HTML5标签速查表</a></li>
<li><a href="chrome-extension://ikhdkkncnoglghljlkmcimlnlhkeamad/pdf-viewer/web/viewer.html?file=http%3A%2F%2Fjonibologna.com%2Fcontent%2Fimages%2Fflexboxsheet.pdf" target="_blank" rel="noopener">展示 flexbox 属性的作用–推荐</a></li>
<li><a href="https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/" target="_blank" rel="noopener">Flexbox 视觉指南–更好更容易地理解 Flexbox 某个属性的作用</a></li>
</ul>
<hr>
<ul>
<li><a href="https://github.com/poetries/poetries.github.io/blob/dev/source/_posts/HTML5+CSS3%E5%9F%BA%E7%A1%80%E5%9B%9E%E9%A1%BE%20.md" target="_blank" rel="noopener">本文md文件-仅供参考</a></li>
</ul>

      </div>
    
  </div>

</article>

<button class="assist-btn2 circle" id="assist_btn2" title="点亮屏幕" style="left: 27px; top: 152px;">
  <i class="iconfont" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>
<button class="assist-btn1 circle" id="assist_btn1" title="关闭屏幕亮度" style="left: 27px; top: 152px;">
  <i class="iconfont toc-title" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>


<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>	

<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script>
  const btw = new BTWPlugin();
  btw.init({
    id: "container",
    blogId: "22699-1592137983091-414",
    name: "前端进阶之旅",
    qrcode: "https://poetries1.gitee.io/img-repo/2020/06/qrcode.jpg",
    keyword: "3a3b3c",
  });
</script>

<script type="text/javascript">

// white theme
var body = {color: "#555", background: "#000"};
var a_tag = {color: "#222"};
var header = { background: "#222"};
var logo_line_i = {background: "#222"};
// var post_code = {background: "#eee", color: "#222"};

function switch_theme() {
 $("body").css(body);
 $("a:not('.links-of-author-item a, .site-state-item a, .site-state-posts a, .feed-link a, .motion-element a, .post-tags a, .show-commit-cls a, #donate_board a')").css(a_tag);
 $(".header, .footer").css(header);
 $(".logo-line-before i, .logo-line-after i").css(logo_line_i);
 //$(".post code").css(post_code);
 $("#idhyt-surprise-ball #idhyt-surprise-ball-animation .drag").css(a_tag);
 $(".post-title-link, .posts-expand .post-meta, .post-comments-count, .disqus-comment-count, .post-category a, .post-nav-next a, .post-nav-item a").css(a_tag);
 
 // $("code").css({color: '#c5c8c6', background: '#1d1f21'});
 //$("#assist_btn1").hide(1500);
}

$(function () {
$("#assist_btn2").css("display","none");
 $("#assist_btn1").click(function() {
     switch_theme();
$("div#toc.toc-article").css({
 "background":"#eaeaea",
 "opacity":1
});
$(".toc-article ol").show();
$("#toc.toc-article .toc-title").css("color","#a98602");
$("#assist_btn1").css("display","none");
$("#assist_btn2").css("display","block");
 });
$("#assist_btn2").click(function() {
$("#assist_btn2").css("display","none");
$("#assist_btn1").css("display","block");
$("body").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
     $(".header, .footer").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
$(".toc-article ol").toggle(1000);
 });
});


//背景随机

var Y, O, E, L, B, C, T, z, N, S, A, I;
!function() {
var e = function() {
for (O.clearRect(0, 0, L, B), T = [{
x: 0,
y: .7 * B + C
}, {
x: 0,
y: .7 * B - C
}]; T[1].x < L + C;) t(T[0], T[1])
}, t = function(e, t) {
O.beginPath(), O.moveTo(e.x, e.y), O.lineTo(t.x, t.y);
var n = t.x + (2 * I() - .25) * C,
 r = a(t.y);
O.lineTo(n, r), O.closePath(), N -= S / -50, O.fillStyle = "#" + (127 * A(N) + 128 << 16 | 127 * A(N + S / 3) + 128 << 8 | 127 * A(N + S / 3 * 2) + 128).toString(16), O.fill(), T[0] = T[1], T[1] = {
 x: n,
 y: r
}
}, a = function n(e) {
var t = e + (2 * I() - 1.1) * C;
return t > B || t < 0 ? n(e) : t
};
Y = document.getElementById("evanyou"), O = Y.getContext("2d"), E = window.devicePixelRatio || 1, L = window.innerWidth, B = window.innerHeight, C = 90, z = Math, N = 0, S = 2 * z.PI, A = z.cos, I = z.random, Y.width = L * E, Y.height = B * E, O.scale(E, E), O.globalAlpha = .6, document.onclick = e, document.ontouchstart = e, e()
}()

   
$("#toc-eye").click(function(){
$("#toc.toc-article").toggle(1000);
});

</script>


   
  <div class="text-center donation">
    <div class="inner-donation">
      <span class="btn-donation">支持一下</span>
      <div class="donation-body">
        <div class="tip text-center">扫一扫，支持poetries</div>
        <ul>
        
          <li class="item">
            
              <span>微信扫一扫</span>
            
            <img src="/images/weixin.jpg" alt="">
          </li>
        
          <li class="item">
            
              <span>支付宝扫一扫</span>
            
            <img src="/images/zhifubao.jpg" alt="">
          </li>
        
        </ul>
      </div>
    </div>
  </div>


   
  <div class="box-prev-next clearfix">
    <a class="show pull-left" href="/2016/09/24/javascript笔记基础总结篇/">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="show pull-right" href="/2016/10/20/review-jQuery/">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/categories/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tags/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/search/"
              rel="noopener noreferrer"
              target="_self"
              >
              搜索
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/link/"
              rel="noopener noreferrer"
              target="_self"
              >
              友链
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    

    
    

    

    
    

    

<!-- Gitalk评论插件通用代码 -->
<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
  clientID: '5567a2c4abb858009d96',
  clientSecret: 'b9039ec056cf5c2346b3cdb63308a28c163f91e5',
  repo: 'poetries.github.io',
  owner: 'poetries',
  // 在这里设置一下截取前50个字符串, 这是因为 github 对 label 的长度有了要求, 如果超过
  // 50个字符串则会报错.
  // id: location.pathname.split('/').pop().substring(0, 49),
  id: location.pathname,
  admin: ['poetries'],
  // facebook-like distraction free mode
  distractionFreeMode: false
})
gitalk.render('gitalk-container')
</script>
<!-- Gitalk代码结束 -->



  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>


  <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/js/clicklove.js"></script>
 
  
</body>
</html>
